Quick start: TinyMCE from NPM or Yarn

Install TinyMCE using NPM or Yarn

TinyMCE 8 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.

Prerequisites

This procedure requires Node.js (and npm) to be installed. Ensure you have a project directory with a package.json file. If you don’t have a project yet, initialize one by running npm init or yarn init in your project directory.

Install TinyMCE

To add TinyMCE to your project, navigate to your project directory and run one of the following commands:

  • NPM:

    npm install tinymce@^8

  • Yarn:

    yarn add tinymce@^8

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.

Install premium plugins

The tinymce-premium NPM package provides all premium plugins, skins, themes, icons, and language packs for commercial TinyMCE customers.

The tinymce-premium package requires a commercial license. Ensure you have a valid license key before using premium plugins. For information on obtaining a license key, see: License Key.

Prerequisites

Before installing premium plugins, ensure you have:

  • The core tinymce package installed (see above)

  • A valid license key

  • Node.js and npm installed

Install the premium plugins package

Install the tinymce-premium package using npm:

npm install tinymce-premium@^8.3

The tinymce-premium package is available for TinyMCE 8.3 onwards and is currently only published to the NPM registry. The package version must align with the tinymce package version—always use compatible versions of both packages (e.g., both at 8.3.0 or later).

Package contents

The tinymce-premium package includes:

  • All premium plugins

  • License key manager plugin

  • Premium skins, icons and language packs

Dictionaries are not included in the tinymce-premium package and remain a separate download.

Using premium plugins

After installing the tinymce-premium package, configure the plugins in your editor. For complete instructions on bundling premium plugins or using the external_plugins option, see: Using premium plugins.

Framework integration

For framework-specific integration guides, see:

Include the TinyMCE script

Include the following line of code in the <head> of a HTML page:

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

Initialize TinyMCE as part of a web form

Initialize TinyMCE 8 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 8 editor instance, pass the selector '#mytextarea' to tinymce.init():

<!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" crossorigin="anonymous"></script>
    <script>
      tinymce.init({
        selector: '#mytextarea',
        license_key: 'gpl' // gpl for open source, T8LK:... for commercial
      });
    </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'
});

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 8 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: