NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Quick start

Get an instance of TinyMCE 5 up and running using the Tiny Cloud.

Contribute to this page

TinyMCE 5 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 the Tiny Cloud.

Step 1: Include the TinyMCE script

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

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

Step 2: Initialize TinyMCE as part of a web form

Initialize TinyMCE 5 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 5 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="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

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

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

TinyMCE HTML JS Edit on CodePen.io

Step 3: Add your API key

To remove the notice:

warning icon This domain is not registered with Tiny Cloud. Please see the quick start guide or create an account.

Replace no-api-key in the source script (<script src=...) with a Tiny Cloud API key, which is created when signing up to the Tiny Cloud.

Signing up for a Tiny Cloud API key will also provide a trial of the Premium Plugins.

Step 4: Save the content with a form POST

Process the content with a form handler.

When the <form> is submitted, TinyMCE 5 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:

Customizing TinyMCE, see: Basic Setup.
The three editor modes, see:
Adding TinyMCE plugins, see: Work with plugins to extend TinyMCE.
Localizing the TinyMCE editor, see: Localize TinyMCE.
For information on the CSS required to render some TinyMCE elements outside of the editor, see: Boilerplate content CSS.
Self-hosting TinyMCE, see: Installing TinyMCE.

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can't find what you're looking for? Let us know.

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.