Integration and setup options

auto_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

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  auto_focus: 'element1'
});

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

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

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.

Type: Object

Example

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

tinymce.init({
  selector: 'textarea',  // 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

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

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins : 'advlist autolink link image lists charmap print preview'
});

Note that the plugin entries should be separated by a blank space.

Check this documentation page for a list of available plugins.

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

tinymce.init({
  selector: 'textarea'  // change this value according to your HTML
});

Replace a textarea element with id ‘editable’

Type: String

Example

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

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

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  setup: function(editor) {
    editor.on('click', function(e) {
      console.log('Editor was clicked');
    });
  }
});

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 over target, so in order for target to work, you should omit selector option altogether.

Type: Node

Example

var el = document.createElement('textarea');
document.body.appendChild(el);

// ...

tinymce.init({
  target: el
});