Installing TinyMCE

There are multiple ways to instantiate TinyMCE. Accessing TinyMCE through Tiny Cloud may not be the best use case for different deployment scenarios. This section explains additional installation options including package managers, self-hosted download, and other custom build options.

Cloud Install

Step 1: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

Step 2: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 3: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

Additional information about using TinyMCE Cloud

There are a few things you need to consider when using Tiny Cloud. If you wish to use any local plugins (like MoxieManager for example) you need to load them using the new external_plugins option.

Also, if you wish to use a custom language, you need to enter the location of the language file into the new language_url option.

You may also want to select a specific version of the editor from Tiny Cloud and you should head on over to Specify editor & plugin versions for details on that.

If you have decided to use Tiny Cloud, please move on to the next step working with plugins where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

Package Manager Install Options

NPM

npm install tinymce@^5

Step 1: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="/path/to/tinymce.min.js"></script>

Step 2: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="/path/to/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 3: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

Use of local plugins & language packs when installing via package managers

When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:

tinymce.init({
  selector: 'textarea',
  language: 'sv',
  language_url: '/js/sv.js',
  plugins: 'myplugin',
  external_plugins: {
    'myplugin': '/js/myplugin/plugin.min.js'
  }
});
If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

Bower

bower install tinymce

If you’d like to install and build the source manually with Bower use these steps. This approach can be used when debugging or building custom plugins.

bower install tinymce-src=git://github.com/tinymce/tinymce
cd bower_components/tinymce-src
npm i
jake

Step 1: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="/path/to/tinymce.min.js"></script>

Step 2: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="/path/to/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 3: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

Use of local plugins & language packs when installing via package managers

When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:

tinymce.init({
  selector: 'textarea',
  language: 'sv',
  language_url: '/js/sv.js',
  plugins: 'myplugin',
  external_plugins: {
    'myplugin': '/js/myplugin/plugin.min.js'
  }
});

If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

Composer

If you’re using Composer package manager, run the following on a command line or command prompt:

composer require tinymce/tinymce

Step 1: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="/path/to/tinymce.min.js"></script>

Step 2: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="/path/to/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 3: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

Use of local plugins & language packs when installing via package managers

When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:

tinymce.init({
  selector: 'textarea',
  language: 'sv',
  language_url: '/js/sv.js',
  plugins: 'myplugin',
  external_plugins: {
    'myplugin': '/js/myplugin/plugin.min.js'
  }
});
If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

NuGet

Install-Package TinyMCE

Step 1: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="/path/to/tinymce.min.js"></script>

Step 2: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="/path/to/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 3: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

Use of local plugins & language packs when installing via package managers

When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:

tinymce.init({
  selector: 'textarea',
  language: 'sv',
  language_url: '/js/sv.js',
  plugins: 'myplugin',
  external_plugins: {
    'myplugin': '/js/myplugin/plugin.min.js'
  }
});
If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

Self-Hosted Install

Step 1: Download the Self-hosted package

If you’d rather download and install the script manually, get the package from TinyMCE Downloads.

Unzip the package and move the 'path/to/tinymce/' directory into a web accessible location on your web server (for example, localhost).

Step 2: Include the TinyMCE script

Include this line of code in the <head> of your HTML page:

<script src="path/to/tinymce/js/tinymce.min.js"></script>

Step 3: Initialize TinyMCE as part of a web form

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().

In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().

<!DOCTYPE html>
<html>
<head>
  <script src="/path/to/tinymce/tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
  </form>
</body>
</html>

Step 4: Saving content with a form POST

When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.

If you decided to use the Self-hosted package, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

Custom Build Install

TinyMCE tries to be as flexible to your project’s needs as possible. We have a customized package builder available here (TinyMCE 4 only) where you can select the core, plugins, skins, themes and compression options you’d like to include in your download.

If you selected the standalone core option in your custom build follow the self-hosted Self-Hosted Install install instructions; if you built the jQuery core option follow the jQuery instructions.

Once you have the editor installed, move on to the next step work with plugins, where you’ll start customizing TinyMCE.