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.

To have an AI coding agent perform this setup instead, see the AI quick start guide.

Add the TinyMCE script

Add the following script tag to the <head> of an HTML file. It loads TinyMCE from the Tiny Cloud content delivery network (CDN):

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

Add the API key

The script URL contains a no-api-key placeholder. Replace it with the Tiny Cloud API key, which is created when signing up to the Tiny Cloud. Signing up also provides a trial of the Premium Plugins.

Until a valid API key is in place, the editor displays the following notice:

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

Initialize the editor

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.

The plugins and toolbar options determine which features the editor provides. The following example initializes the editor on a textarea with the identifier mytextarea, and configures a menu bar and a toolbar covering the most commonly used editing features:

<!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>
    <textarea id="mytextarea">Hello, World!</textarea>
    <script>
      tinymce.init({
        selector: '#mytextarea',
        plugins: [
          'advlist', 'anchor', 'autolink', 'charmap', 'code', 'codesample', 'emoticons',
          'fullscreen', 'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
          'preview', 'searchreplace', 'table', 'visualblocks', 'wordcount'
        ],
        menubar: 'file edit view insert format tools table help',
        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | charmap emoticons codesample | code preview fullscreen | removeformat help',
        height: 500
      });
    </script>
  </body>
</html>

Every plugin above is included with TinyMCE, so this configuration requires no further setup. To start from a minimal editor instead, pass only the selector and add options as needed.

Opening the page in a web browser loads a TinyMCE editor:

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="cloud-quick-start">
  <h1>Hello, World!</h1>
  <p>This editor was configured with the plugins and toolbar from the quick start guide. Try the formatting controls, insert a <strong>table</strong> or an <strong>image</strong>, or open the code view to inspect the HTML.</p>
  <ul>
  <li>Select text to apply <strong>bold</strong>, <em>italic</em>, or a text color.</li>
  <li>Use the <strong>Insert</strong> menu to add a link, media, or a special character.</li>
  <li>Switch to full screen for a larger editing area.</li>
  </ul>
</textarea>
tinymce.init({
  selector: 'textarea#cloud-quick-start',
  plugins: [
    'advlist', 'anchor', 'autolink', 'charmap', 'code', 'codesample', 'emoticons',
    'fullscreen', 'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
    'preview', 'searchreplace', 'table', 'visualblocks', 'wordcount'
  ],
  menubar: 'file edit view insert format tools table help',
  toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | charmap emoticons codesample | code preview fullscreen | removeformat help',
  height: 500
});

The demo above runs the same configuration as the example. For an editor with every premium plugin enabled, see the full featured demo.

Approve the application domain

An application served from any origin other than localhost requires its domain to be added to the approved domains stored against the API key. Add the domain on the Tiny Account to clear the domain registration notice.

Local development on localhost works without this step, so it can be deferred until the application is deployed or served from a custom host. For the diagnostic steps when the notice persists, see Domain not registered.

Next Steps

For information on: