Quick start: TinyMCE from Tiny Cloud

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

Include the TinyMCE script

Include the following script tag in the <head> of a HTML file:

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

Initialize TinyMCE

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

For example, to initialize a TinyMCE 8 instance at the textarea element, 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="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
  </head>

  <body>
    <h1>TinyMCE Quick Start Guide</h1>
    <textarea id="mytextarea">Hello, World!</textarea>
    <script>
      tinymce.init({
        selector: '#mytextarea'
      });
    </script>
  </body>
</html>

Adding this content to the 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'
});

Update the "no-api-key" placeholder

Update the no-api-key placeholder in the source script URL (+<script src=https://…​/no-api-key/tinymce/8/tinymce.min.js+/>) with your Tiny Cloud API key, which is created when signing up to the Tiny Cloud.

Providing a valid API key also removes the notice:

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

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

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: