---
title: "jQuery integration"
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/5/jquery-pm/index.md"
version: "5"
last_updated: "2024-04-09T09:35:32Z"
tokens: 1105
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/jquery-pm/).
# jQuery integration
## TinyMCE jQuery integration quick start guide
The [Official TinyMCE jQuery component](https://github.com/tinymce/tinymce/blob/master/modules/tinymce/src/core/main/js/JqueryIntegration.js) integrates TinyMCE into jQuery projects.
This procedure creates a basic jQuery integration containing a TinyMCE editor based on our [Basic example](../basic-example/).
### Procedure
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](https://code.jquery.com/), 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:
```html
```
Replace `no-api-key` in the source script (`
```
For information on self-hosting TinyMCE, see: [Installing TinyMCE](../installation/).
3. Add an initialization point for TinyMCE, such as:
```html
```
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.
```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/rsdaab/840).
## A note about integrations
> **Note:** 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](https://stackoverflow.com/questions/tagged/tinymce).