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.

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