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.


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

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

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

      <textarea id="tiny"></textarea>
  4. 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.

      $('textarea#tiny').tinymce({    });

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="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>
      <textarea id="tiny"></textarea>
        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'

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.

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.