05. Advanced Install

Learn how to install TinyMCE via our CDN, package manager options, SDK, jQuery and custom build options.

Contribute to this page

So far we've been using the CDN version of TinyMCE and while it's the easiest way to instantiate the editor it may not always be the best way. In this section we will explain some of TinyMCE's other installation options including package managers, downloading the SDK, and the custom build option.

On this page you'll find a detailed guide to our installation options:

CDN Install

Step 1: Include the TinyMCE script

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

<script src="//cdn.tinymce.com/4/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="//cdn.tinymce.com/4/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>.

Additional information about using the CDN

There are a few things you need to consider when using the CDN version. 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.

For a list of versions supported by the CacheFly CDN, check this text document: http://tinymce.cachefly.net/index.txt

While we're at it a big shout out to Cachefly who sponsors the CDN hosting of TinyMCE. If you haven't tried CacheFly now is the perfect time. Use promo code TINYMCE to get exclusive pay-as-you-go pricing. They also have a risk-free 2TB 14-day trial with no credit card required. Sign up at www.cachefly.com.

If you have decided to use the CDN, 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

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, add the following to composer.json.

php composer.phar require "tinymce/tinymce" ">= 4"

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.

SDK Install

Step 1: Download the SDK

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 have decided the use the SDK, 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.

jQuery Install

Step 1: Download the jQuery package

We have a jQuery plugin available here if you'd rather install TinyMCE using this method.

Note: the above link will take you to the custom package download page. When building your jQuery package, select "TinyMCE core (jQuery) under the "Core Elements" section.

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

Step 2: Installation

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

<script src="/path/to/tinymce/tinymce.min.js"></script>
<script src="/path/to/tinymce/jquery.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 CSS3 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 src="/path/to/tinymce/jquery.tinymce.min.js"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#mytextarea'
  });
  </script>
</head>

<body>
  <h1>TinyMCE Getting Started Guide</h1>
  <form method="post">
    <textarea id="mytextarea"></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 a form post. No additional configuration is required.

If you have decided the use the jQuery version, move on to the next step Work 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 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 SDK 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.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.