jquery-quick-start.adoc

The Official {productname} jQuery component integrates {productname} into jQuery projects.

Procedure

This procedure creates a basic jQuery integration containing a {productname} editor based on our Basic example.

1. Open an HTML file

2. Add an initialization point for {productname}, such as:

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

3. Add the {productname} jQuery init script. The {productname} selector is defined in the jQuery prefix, and any other settings are defined in the object passed to the tinymce method.

Example jQuery integration

To load a {productname} editor similar to the Basic example, add the following code to an empty HTML file. == {productname} in a jQuery UI Dialog To render {productname} 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 {productname} fiddle.