TinyMCE jQuery integration quick start guide

The Official TinyMCE jQuery component integrates TinyMCE into jQuery projects.

Procedure

This procedure creates a basic jQuery integration containing a TinyMCE editor based on our Basic example.

Install jQuery, TinyMCE, the TinyMCE jQuery integration and the library fs-extra from NPM:
```
npm install --save jquery tinymce @tinymce/tinymce-jquery fs-extra
```

Setup a postinstall script to copy the packages into a public directory whenever a new dependency is installed:

postinstall.js

const fse = require('fs-extra');
const path = require('path');

const nodeModulesDir = path.join(__dirname, 'node_modules');
const publicDir = path.join(__dirname, 'public');

fse.emptyDirSync(path.join(publicDir, 'jquery'));
fse.emptyDirSync(path.join(publicDir, 'tinymce'));
fse.emptyDirSync(path.join(publicDir, 'tinymce-jquery'));
fse.copySync(path.join(nodeModulesDir, 'jquery', 'dist'), path.join(publicDir, 'jquery'), { overwrite: true });
fse.copySync(path.join(nodeModulesDir, 'tinymce'), path.join(publicDir, 'tinymce'), { overwrite: true });
fse.copySync(path.join(nodeModulesDir, '@tinymce', 'tinymce-jquery', 'dist'), path.join(publicDir, 'tinymce-jquery'), { overwrite: true });

package.json

{
  // ... snip ...
  "scripts": {
    "postinstall": "node ./postinstall.js"
  }
}

Run the postinstall script to copy the packages into your public directory:
```
npm run postinstall
```
Open an HTML file

Assuming the public directory is served at /public, add source scripts, such as:

<script src="/public/jquery/jquery.min.js"></script>
<script src="/public/tinymce/tinymce.min.js"></script>
<script src="/public/tinymce-jquery/tinymce-jquery.min.js"></script>

For information on self-hosting TinyMCE, see: Installing TinyMCE.

Add an initialization point for TinyMCE, such as:

<div>
  <textarea id="tiny">&lt;p&gt;Encoded HTML content&lt;/p&gt;</textarea>
</div>

Add the TinyMCE jQuery init script. The TinyMCE selector is defined in the jQuery prefix, and any other settings are defined in the object passed to the tinymce method.
```
<script>
  $('textarea#tiny').tinymce({ height: 500, /* other settings... */ });
</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="/public/jquery/jquery.min.js"></script>
    <script src="/public/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="/public/tinymce-jquery/tinymce-jquery.min.js"></script>
  </head>
  <body>
    <div>
      <textarea id="tiny">&lt;p&gt;Welcome to the TinyMCE jQuery example!&lt;/p&gt;</textarea>
    </div>
    <script>
      $('textarea#tiny').tinymce({
        height: 500,
        menubar: false,
        plugins: [
          'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
          'anchor', 'searchreplace', 'visualblocks', 'fullscreen',
          'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
        ],
        toolbar: 'undo redo | blocks | 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.