jQuery integration

Documentation for the official TinyMCE 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

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

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.