jQuery integration

TinyMCE jQuery integration quick start guide

The Official TinyMCE jQuery component integrates TinyMCE into jQuery projects. This procedure creates a basic jQuery integration containing a TinyMCE editor based on our Basic example.

Procedure

In a HTML file, add a source script for source jQuery.

If the project loads jQuery from https://code.jquery.com/, use the script provided by the jQuery CDN, which includes the integrity and crossorigin attributes.
Source TinyMCE and the TinyMCE jQuery integration from the Tiny Cloud or from a self-hosted location.
- Tiny Cloud
  
  To source TinyMCE and the TinyMCE jQuery integration from the Tiny Cloud, add the following script elements:
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/jquery.tinymce.min.js" referrerpolicy="origin"></script>
  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.
- TinyMCE self-hosted
  
  To use an independent deployment of TinyMCE, add source scripts to either the <head> or the end of the <body> of the HTML file, such as:
  <script src="/path/to/tinymce.min.js"></script> <script src="/path/to/jquery.tinymce.min.js"></script>
  For information on self-hosting TinyMCE, see: Installing TinyMCE.
Add an initialization point for TinyMCE, such as:
```
<div>
  <textarea id="tiny"></textarea>
</div>
```
Add the TinyMCE jQuery init script. The TinyMCE selector is defined in the jQuery prefix, and any other settings are defined within the tinymce object.
```
<script>
  $('textarea#tiny').tinymce({    });
</script>
```

Example jQuery integration

To load a TinyMCE editor similar to the Basic example, add the following code to an empty HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/jquery.tinymce.min.js" referrerpolicy="origin"></script>
  </head>
  <body>
    <div>
      <textarea id="tiny"></textarea>
    </div>
    <script>
      $('textarea#tiny').tinymce({
        height: 500,
        menubar: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
      });
    </script>
  </body>
</html>

TinyMCE in a jQuery UI Dialog

To render TinyMCE instances inside jQuery UI dialogs, add the following code:

// Prevent jQuery UI dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
    e.stopImmediatePropagation();
  }
});

This code is required because jQuery blocks all focusin calls from elements outside the dialog. For a working example, try this TinyMCE fiddle.

A note about integrations

We are pleased to provide integrations/code guidance to help you build great products with TinyMCE. If you have queries about this integration, post your question on Stack Overflow using the tinymce tag.