---
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-cloud/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/jquery-cloud/index.md"
version: "6"
last_updated: "2022-05-26T23:54:23Z"
tokens: 1010
---
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-cloud/).
# 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. Open an HTML file
2. Add a `
```
Replace `no-api-key` in the source script (`
```
5. Add an initialization point for TinyMCE, such as:
```html
```
6. 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).