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.

  1. Install jQuery, TinyMCE, the TinyMCE jQuery integration and the library fs-extra from NPM:

    npm install --save jquery tinymce @tinymce/tinymce-jquery fs-extra
  2. Setup a postinstall script to copy the packages into a public directory whenever a new dependency is installed:

    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 });
      // ... snip ...
      "scripts": {
        "postinstall": "node ./postinstall.js"
  3. Run the postinstall script to copy the packages into your public directory:

    npm run postinstall
  4. Open an HTML file

  5. 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.

  6. Add an initialization point for TinyMCE, such as:

      <textarea id="tiny">&lt;p&gt;Encoded HTML content&lt;/p&gt;</textarea>
  7. 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.

      $('textarea#tiny').tinymce({ height: 500, /* other settings... */ });

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">
    <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>
      <textarea id="tiny">&lt;p&gt;Welcome to the TinyMCE jQuery example!&lt;/p&gt;</textarea>
        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'

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) {

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