Integration and setup options
Essential editor configuration, including `selector` and `plugins` keys.
Contribute to this pageauto_focus
Automatically set the focus to an editor instance. The value of this option should be an editor instance id
. The editor instance id is the id for the original textarea
or div
element that got replaced.
Type: String
Example: Using auto_focus
tinymce.init({
selector: 'textarea', // change this value according to your HTML
auto_focus: 'element1'
});
base_url
This option lets you specify the base URL for TinyMCE. This is useful if you want to load TinyMCE from one location and things like the theme and plugins from another.
By default, the base_url
is the directory containing TinyMCE javascript file (such as tinymce.min.js
).
Type: String
Example: Using base_url
tinymce.init({
selector: 'textarea', // change this value according to your HTML
base_url: '/my/tinymce/dir'
});
cache_suffix
This option lets you add a custom cache buster URL part at the end of each request tinymce
makes to load CSS, scripts, etc. Just add the query string part you want to append to each URL request, for example “?v=4.1.6”.
Type: String
Example: Using cache_suffix
tinymce.init({
selector: 'textarea', // change this value according to your HTML
cache_suffix: '?v=4.1.6'
});
content_security_policy
This option allows you to set a custom content security policy for the editor’s iframe contents.
Type: String
Example: Using content_security_policy
tinymce.init({
selector: 'textarea', // change this value according to your HTML
content_security_policy: "default-src 'self'"
});
external_plugins
This option allows you to specify a URL based location of plugins outside of the normal TinyMCE plugins directory.
TinyMCE will attempt to load these as per regular plugins when starting up. This option is useful when loading TinyMCE from a CDN or when you want to have the TinyMCE directory separate from your custom plugins.
This value should be set as a JavaScript object that contains a property for each TinyMCE plugin to be loaded. This property should be named after the plugin and should have a value that contains the location that the plugin that will be loaded from.
The URLs provided can be:
- Absolute URLs: Including the protocol, such as
https://www.example.com/plugin.min.js
. - Relative to the root directory of the web-server: Including the leading “
/
” to indicate that it is relative to the web-server root, such as/plugin.min.js
. - Relative to the TinyMCE
base_url
: A relative path without the leading “/
”, such as../../myplugins/plugin.min.js
. By default, thebase_url
is the directory containing TinyMCE javascript file (such astinymce.min.js
). For information on thebase_url
option, see: Integration and setup options -base_url
.
Type: Object
Example: Using external_plugins
tinymce.init({
selector: 'textarea', // change this value according to your HTML
external_plugins: {
'testing': 'http://www.testing.com/plugin.min.js',
'maths': 'http://www.maths.com/plugin.min.js'
}
});
hidden_input
The hidden_input option gives you the ability to disable the auto-generation of hidden input fields for inline editing elements. By default all inline editors have a hidden input element in which content gets saved when an editor.save()
or tinymce.triggerSave()
is executed.
The hidden_input option can be disabled if you don’t need these controls.
Type: Boolean
Default Value: true
Possible Values: true
, false
Example: Using hidden_input
tinymce.init({
selector: 'div', // change this value according to your HTML
inline: true,
hidden_input: false
});
init_instance_callback
The init_instance_callback option allows you to specify a function name to be executed each time an editor instance is initialized. The format of this function is initInstance(editor)
where editor
is the editor instance object reference.
Type: JavaScript Function
Example: Using init_instance_callback
tinymce.init({
selector: 'textarea', // change this value according to your HTML
init_instance_callback : function(editor) {
console.log('Editor: ' + editor.id + ' is now initialized.');
}
});
You may also want to take a look at the setup callback option as it can be used to bind events before the editor instance is initialized.
plugins
This option allows you to specify which plugins TinyMCE will attempt to load when starting up. By default, TinyMCE will not load any plugins.
Type: String
Example: Using plugins
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins : 'advlist autolink link image lists charmap print preview'
});
Note: Each plugin entry should be separated by a blank space.
Check this documentation page for a list of available plugins.
readonly
Setting the readonly
option to true
will initialize the editor in "readonly"
mode instead of editing ("design"
) mode. Once initialized, the editor can be set to editing ("design"
) mode using the tinymce.editor.mode.set
API.
Type: Boolean
Default Value: false
Possible Values: true
, false
Example: Using readonly
tinymce.init({
selector: 'textarea', // change this value according to your HTML
readonly: true
});
referrer_policy
Note: This feature is only available for TinyMCE 5.1 and later.
Used for setting the level of referrer information sent when loading plugins and CSS. Referrer policies can be used to:
- Improve the privacy of end-users.
- Assist with server-side filtering of cross-origin requests for TinyMCE resources.
Type: String
Default Value: ''
For a list of valid referrer policies (directives), see: MDN Web Docs - Referrer-Policy.
Example: Using referrer_policy
tinymce.init({
selector: 'textarea', // change this value according to your HTML
referrer_policy: 'strict-origin-when-cross-origin'
});
selector
This option allows you to specify a CSS selector for the areas that TinyMCE should make editable.
When using this option in TinyMCE’s regular editing mode, the element will be replaced with an iframe
that TinyMCE will perform all operations within.
Replace all textarea elements on the page
Type: String
Example: Replace all textarea elements with TinyMCE
tinymce.init({
selector: 'textarea' // change this value according to your HTML
});
Replace a textarea element with id “editable”
Type: String
Example: Replace a textarea element with the id “editable”
tinymce.init({
selector: 'textarea#editable'
});
When using this option in TinyMCE’s inline editing mode, the selector can be used on any block element and will edit the content in place instead of replacing the element with an iframe
.
Inline editing mode on a div element with id “editable”
Type: String
Example: Add an inline editor on a div with the id “editable”
tinymce.init({
selector: 'div#editable',
inline: true
});
For more information on the differences between regular and inline editing modes please see this page here.
setup
This option allows you to specify a callback that will be executed before the TinyMCE editor instance is rendered.
To specify a setup callback, please provide the setup
option with a JavaScript function. This function should have one argument, which is a reference to the editor that is being set up.
A common use case for this setting is to add editor events to TinyMCE. For instance, if you would like to add a click event to TinyMCE, you would add it through the setup configuration setting.
Type: JavaScript Function
Example: Using setup
tinymce.init({
selector: 'textarea', // change this value according to your HTML
setup: function (editor) {
editor.on('click', function () {
console.log('Editor was clicked');
});
}
});
suffix
This option lets you specify the suffix of TinyMCE. By default this value will be set to the same as the suffix of the script holding TinyMCE. When loading things like the theme and plugins this suffix will be inserted into all requests. For example, loading TinyMCE with a tinymce.min.js
file will make TinyMCE load .min
versions of everything it lazy-loads, like theme.min.js
and plugin.min.js
The suffix option is useful for overriding this behaviour.
Type: String
Example: Using suffix
tinymce.init({
selector: 'textarea', // change this value according to your HTML
suffix: '.min'
});
target
Sometimes there might be already a reference to a DOM element at hand, for example when element is created dynamically. In such case initialising editor on it by selector might seem irrational (since selector - id or class should be created first). In such cases you can supply that element directly via target
option.
Important:
selector
option has precedence overtarget
, so in order fortarget
to work, do not use theselector
option.
Type: Node
Example: Using target
var el = document.createElement('textarea');
document.body.appendChild(el);
// ...
tinymce.init({
target: el
});
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.