---
title: "TinyMCE jQuery integration quick start guide"
description: "Documentation for the official TinyMCE jQuery integration."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/jquery-pm/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/jquery-pm/index.md"
version: "6"
last_updated: "2022-05-26T23:54:23Z"
tokens: 1144
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/jquery-pm/).
# TinyMCE jQuery integration quick start guide
The [Official TinyMCE jQuery component](https://github.com/tinymce/tinymce-jquery) integrates TinyMCE into jQuery projects.
## Procedure
This procedure creates a basic jQuery integration containing a TinyMCE editor based on our [Basic example](../basic-example/).
1. Install jQuery, TinyMCE, the TinyMCE jQuery integration and the library `fs-extra` from NPM:
```shell
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:
postinstall.js
```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
```json
{
// ... snip ...
"scripts": {
"postinstall": "node ./postinstall.js"
}
}
```
3. Run the `postinstall` script to copy the packages into your public directory:
```shell
npm run postinstall
```
4. Open an HTML file
5. Assuming the `public` directory is served at `/public`, add source scripts, such as:
```html
```
For information on self-hosting TinyMCE, see: [Installing TinyMCE](../installation/).
6. Add an initialization point for TinyMCE, such as:
```html
```
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.
```html
```
## Example jQuery integration
To load a TinyMCE editor similar to the [Basic example](../basic-example/), add the following code to an empty HTML file.
```html
```
## TinyMCE in a jQuery UI Dialog
To render TinyMCE instances inside jQuery UI dialogs, add the following code:
```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, [try this TinyMCE fiddle](http://fiddle.tiny.cloud/ZZhaab/4).