jQuery integration
Documentation for the official TinyMCE jQuery integration.
Contribute to this pageTinyMCE jQuery integration quick start guide
The Official TinyMCE jQuery component integrates TinyMCE into jQuery projects. This procedure creates a basic jQuery integration containing a TinyMCE editor based on our Basic example.
Procedure
-
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, which includes the
integrity
andcrossorigin
attributes. -
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:<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/jquery.tinymce.min.js" referrerpolicy="origin"></script>
Replace
no-api-key
in the source script (<script src=...
) with a Tiny Cloud API key, which is created when signing up to the Tiny Cloud.Signing up for a Tiny Cloud API key will also provide a trial of the Premium Plugins.
-
TinyMCE self-hosted
To use an independent deployment of TinyMCE, add source scripts to either the
<head>
or the end of the<body>
of the HTML file, such as:<script src="/path/to/tinymce.min.js"></script> <script src="/path/to/jquery.tinymce.min.js"></script>
For information on self-hosting TinyMCE, see: Installing TinyMCE.
-
-
Add an initialization point for TinyMCE, such as:
<div> <textarea id="tiny"></textarea> </div>
-
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.<script> $('textarea#tiny').tinymce({ }); </script>
Example jQuery integration
To load a TinyMCE editor similar to the Basic example, add the following code to an empty HTML file.
<!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.4.1.min.js"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/jquery.tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<div>
<textarea id="tiny"></textarea>
</div>
<script>
$('textarea#tiny').tinymce({
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
});
</script>
</body>
</html>
TinyMCE in a jQuery UI Dialog
To render TinyMCE 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 TinyMCE fiddle.
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.
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.