tinymce-docs/modules/ROOT/partials/integrations/jquery-quick-start.adoc

The https://github.com/tinymce/tinymce-jquery[Official {productname} jQuery component] integrates {productname} into jQuery projects.

== Procedure
This procedure creates a basic jQuery integration containing a {productname} editor based on our xref:basic-example.adoc[Basic example].

ifeval::["{productSource}" == "package-manager"]
. Install jQuery, {productname}, the {productname} jQuery integration and the library `fs-extra` from NPM:
+
[source,shell]
----
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
[source,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
[source,json]
----
{
  // ... snip ...
  "scripts": {
    "postinstall": "node ./postinstall.js"
  }
}
----

. Run the `postinstall` script to copy the packages into your public directory:
+
[source,shell]
----
npm run postinstall
----
endif::[]

. Open an HTML file

ifeval::["{productSource}" == "package-manager"]
. Assuming the `public` directory is served at `+/public+`, add source scripts, such as:
+
[source,html]
----
<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 {productname}, see: xref:installation.adoc[Installing {productname}].
endif::[]

ifeval::["{productSource}" == "cloud"]
. Add a `<script>` element to get jQuery with a snippet from the official
https://code.jquery.com/[jQuery CDN page], which includes the `integrity` and
`crossorigin` attributes.

. Add the following `<script>` element to get {productname} from the {cloudname}:
+
[source,html,subs="attributes+"]
----
<script src="{cdnurl}" referrerpolicy="origin"></script>
----
+
Replace `no-api-key` in the source script (`<script src=...`) with a {cloudname}
API key, which is created when signing up to the link:{accountsignup}/[{cloudname}].

. Add the following `<script>` element to get the {productname} jQuery integration from the JS Delivr CDN:
+
[source,html,subs="attributes+"]
----
<script src="{jquery_url}"></script>
----
endif::[]
. Add an initialization point for {productname}, such as:
+
[source,html]
----
<div>
  <textarea id="tiny">&lt;p&gt;Encoded HTML content&lt;/p&gt;</textarea>
</div>
----

. 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.
+
ifeval::["{productSource}" == "cloud"]
[source,html]
----
<script>
  $('textarea#tiny').tinymce({
    height: 500,
    api_key: '<your api key>',
    /* other settings... */,
  });
</script>
----
. Update the `+api_key+` property to include your link:{accountsignup}/[{cloudname} API key].
endif::[]

ifeval::["{productSource}" == "package-manager"]
[source,html]
----
<script>
  $('textarea#tiny').tinymce({
    height: 500,
    license_key: '<your license key>',
    /* other settings... */,
  });
</script>
----
. Update the `+license_key+` property and include your xref:license-key.adoc[License Key].
endif::[]

== Example jQuery integration

To load a TinyMCE editor similar to the xref:basic-example.adoc[Basic example], add the following code to an empty HTML file.
ifeval::["{productSource}" == "package-manager"]
[source,html,subs="attributes+"]
----
<!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,
        license_key: '<your-license-key>',
        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>
----
endif::[]
ifeval::["{productSource}" == "cloud"]
[source,html,subs="attributes+"]
----
<!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.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script
      src="{cdnurl}"
      referrerpolicy="origin"
    ></script>
    <script src="{jquery_url}"></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,
        api_key: '<your api key>',
        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>
----
endif::[]
== TinyMCE in a jQuery UI Dialog
To render {productname} instances inside jQuery UI dialogs, add the following code:
[source,js]
----
// 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, http://fiddle.tiny.cloud/ZZhaab/4[try this {productname} fiddle].