Quick start: TinyMCE from .zip

Install TinyMCE using a .zip package

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 a TinyMCE .zip package.

Deploy TinyMCE from a .zip archive

  1. Download TinyMCE.

  2. Unzip the archive into a public folder of your webserver, such as:

    unzip tinymce_latest.zip -d /path/to/webserver/public/

    The location of the main TinyMCE script will be: /path/to/webserver/public/tinymce/js/tinymce/tinymce.min.js.

For commercial customers using premium plugins, you can install the tinymce-premium NPM package and configure premium plugins using the external_plugins option. For more information, see: external_plugins configuration option and Installing premium plugins from NPM.

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

Get and set content programmatically

Use the getContent and setContent APIs to read and write editor content from JavaScript. For the setContent arguments, undo behavior, and how to change content before it is set, see: Setting editor content.

Example: retrieve editor content as HTML

const editor = tinymce.activeEditor;
const html = editor.getContent();
console.log(html);

To retrieve the content as plain text instead of HTML:

const editor = tinymce.activeEditor;
const text = editor.getContent({ format: 'text' });
console.log(text);

Example: set editor content

const editor = tinymce.activeEditor;
editor.setContent('<p>New content</p>');

Next Steps

For information on: