Installing TinyMCE from NPM

Install TinyMCE using npm or Yarn

TinyMCE 7 is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a TinyMCE editor to a web page using npm or Yarn.

To add TinyMCE to a project:

  • Using npm, run the following on a command line:

    npm install tinymce@^7

  • Using Yarn, run the following on a command line:

    yarn add tinymce@^7

The location of the main TinyMCE script will be: node_modules/tinymce/tinymce.min.js. Ensure the tinymce directory containing the tinymce.min.js file is accessible for the target page or application by either:

  • Using a webserver route, or

  • Copying the tinymce directory to a public folder using a build tool such as Gulp or Webpack.

Include the TinyMCE script

Include the following line of code in the <head> of an HTML page.

<script src="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin"></script>

Initialize TinyMCE as part of a web form

Initialize TinyMCE 7 on any element (or elements) on the web page by passing an object containing a selector value to tinymce.init(). The selector value can be any valid CSS selector.

For example: To replace <textarea id="mytextarea"> with a TinyMCE 7 editor instance, pass the selector '#mytextarea' to tinymce.init().

For example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: '#mytextarea',
        license_key: 'gpl|<your-license-key>'
      });
    </script>
  </head>

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

Adding this content to an HTML file and opening it in a web browser will load a TinyMCE editor, such as:

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="default">Hello, World!</textarea>
tinymce.init({
  selector: 'textarea#default'
});

Setting the license

Use TinyMCE with the GPLv2+ license

If the developer intends to self-host TinyMCE under the GPL license, they can set the license_key config option to 'gpl'. Case sensitivity does not matter.

Example

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  license_key: 'gpl'
});

Use TinyMCE with a commercial license

If the developer intends to self-host TinyMCE under a commercial license, a valid license key must be provided. Customers who have purchased a self-hosted-eligible license for TinyMCE will find their license key in the account portal. To purchase a commercial license, see available options on the pricing page.

Example

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  license_key: '<your-license-key>'
});

For more information on licensing, see the License Key guide.

Save the content from the editor

To retrieve content from the editor, either process the content with a form handler or use the getContent API.

If you use a form handler, once the <form> is submitted, TinyMCE 7 will POST the content in the same way as a normal HTML <textarea>, including the HTML elements and inline CSS of the editor content. The host’s form handler can process the submitted content in the same way as content from a regular <textarea>.

Next Steps

For information on: