---
title: "Key editor options for adding TinyMCE to an application"
description: "Key editor options for integrating TinyMCE to an application"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/editor-important-options/index.md"
version: "6"
last_updated: "2025-07-28T02:34:44Z"
tokens: 3361
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/editor-important-options/).
# Key editor options for adding TinyMCE to an application

## Target location for TinyMCE

### `selector`

This option allows a CSS selector to be specified 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. 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`.

For more information on the differences between regular and inline editing modes see [Setup inline editing mode](../use-tinymce-inline/).

**Type:** `String`

#### Example: replace all textarea elements on the page

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

#### Example: replace a textarea element with id "editable"

```js
tinymce.init({
  selector: 'textarea#editable'
});
```

#### Example: inline editing mode on a div element with id "editable"

```js
tinymce.init({
  selector: 'div#editable',
  inline: true
});
```

### `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](#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:** The `selector` option has precedence over `target`, so in order for `target` to work, do not use the `selector` option.
**Type:** `Node`

#### Example: using `target`

```js
const el = document.createElement('textarea');
document.body.appendChild(el);

// ...

tinymce.init({
  target: el
});
```

## Adding placeholder content to the editor

### `placeholder`

This option adds placeholder content that will be shown when the editor is empty.

> **Note:** If the editor is initialized on a `textarea` element, the placeholder attribute can be used instead.
**Type:** `String`

#### Example: using `placeholder`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  placeholder: 'Type here...'
});
```

## Configuring the editor iframe

### `iframe_attrs`

This option allows adding custom attributes to the editor’s content iframe element when running in classic mode. The attributes are applied during the iframe creation.

> **Note:** This option only affects the main editor content iframe, not other iframes such as preview frames, dialog iframes, or iframe elements created within the editor content.
**Type:** `Object`

Example: using `iframe_attrs` for accessibility
```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  iframe_attrs: {
    'aria-required': 'true',
    'aria-describedby': 'editor-description'
  }
});
```
Example: using `iframe_attrs` for custom styling
```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  iframe_attrs: {
    'style': 'background-color:rgb(64, 167, 99); border: 2px solid #ddd;',
    'class': 'custom-editor-frame'
  }
});
```
Example: verifying `iframe_attrs` configuration
```js
// After the editor is initialized, you can verify the configuration:
console.log(tinymce.activeEditor.options.get('iframe_attrs'));
// Output:  {style: 'background-color:rgb(64, 167, 99); border: 2px solid #ddd;', class: 'custom-editor-frame'}
```

## Focusing on the editor

### Tab order

The tab order of the elements in a page, including TinyMCE, should be configured by setting the [`tabindex` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) on the relevant HTML elements. The browser will then natively handle the tab order.

To configure `tabindex` for the TinyMCE editor, set the attribute on the target element for the editor.

In iframe (classic editor) mode, TinyMCE will copy the `tabindex` attribute from the target element to the editor’s iframe, to allow this to work correctly.

#### Example: configuring tab order

```html
<script>
tinymce.init({
  selector: 'textarea'
});
</script>
...
<input tabindex="1">
<textarea tabindex="2"></textarea>
<input tabindex="3">
```

### `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: using `auto_focus`

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

### `custom_ui_selector`

Use the **custom_ui_selector** option to specify the elements that you want TinyMCE to treat as a part of the editor UI. Specifying elements enables the editor not to lose the selection even if the focus is moved to the elements matching this selector. The `editor blur` event is not fired if the focus is moved to elements matching this selector since it’s treated as part of the editor UI.

**Type:** `String`

#### Example: using `custom_ui_selector`

```html
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  custom_ui_selector: '.my-custom-button'
});
...
<textarea></textarea>
<button class="my-custom-button">Button</button>
```

### `highlight_on_focus`

> **Note:** This feature is only available for TinyMCE 6.4 and later.
The `highlight_on_focus` option adds a blue outline to an instantiated TinyMCE editor when that editor is made the input focus. When using the `oxide-dark` skin, the outline is white.

This allows users to clearly see when the editor is in focus, or which editor has focus if more than one TinyMCE instance is available.

**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

#### Example: using `highlight_on_focus`

```js
tinymce.init({
  selector: "textarea",
  highlight_on_focus: true
});
```

#### Using `highlight_on_focus` with custom skins

If a [custom skin](../creating-a-skin/) is being used, two variables can be updated to match the `highlight_on_focus` option’s appearance with the custom skin.

The two rules and their default values are:

```css
@edit-area-border-color: #2D6ADF;
@edit-area-border-width: 2px;
```

> **Note:** This is entirely optional. If the default values are not changed, the `highlight_on_focus` option works with a custom skin exactly as it does with TinyMCE default skins.

## Extend TinyMCE with plugins

There are two options for adding plugins to TinyMCE: `plugins` and `external_plugins`. Tiny recommends using the `plugins` option for plugins bundled with the product or included in your cloud subscription. Custom or third-party plugins should be included using the `external_plugins` option to simplify updating and upgrading TinyMCE.

### `plugins`

This option allows configuring which plugins TinyMCE will attempt to load when starting up. By default, TinyMCE will not load any plugins.

The plugins can be provided as either:

- A string of space or comma separated plugin names, such as `'plugin1 plugin2'`, or
- An array of plugin names, such as `[ 'plugin1' , `plugin2' ]`

**Type:** `String` or `Array`

#### Example: using `plugins` with a string

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

#### Example: using `plugins` with an array

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: [ 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview' ]
});
```
[Check this documentation page for a list of available plugins](../plugins/).

### `external_plugins`

This option allows a URL based location of plugins to be provided that are 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 the TinyMCE directory is separate from 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, the `base_url` is the directory containing TinyMCE javascript file (such as `tinymce.min.js`). For information on the `base_url` option, see: [Integration and setup options - `base_url`](#base_url).

**Type:** `Object`

#### Example: using `external_plugins`

```js
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'
  }
});
```

## Starting the editor in a read-only state

### `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](../apis/tinymce.editormode/#set).

**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

#### Example: using `readonly`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  readonly: true
});
```
**Example**

```js
tinymce.init({
  selector: 'textarea#readonly-demo',
  readonly: true,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

## Executing custom functions while the editor starts (initializes)

### `setup`

This option allows a callback to be provided that will be executed before the TinyMCE editor instance is rendered.

To specify a setup callback, 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:** `Function`

#### Example: using `setup`

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

### `init_instance_callback`

This option allows a function to be provided that will 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:** `Function`

#### Example: using `init_instance_callback`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  init_instance_callback: (editor) => {
    console.log(`Editor: ${editor.id} is now initialized.`);
  }
});
```
You may also want to take a look at the [setup callback option](#setup) as it can be used to bind events before the editor instance is initialized.

## Changing URL used to load the editor

### `base_url`

This option allows the base URL for TinyMCE to be configured. This is useful if TinyMCE should be loaded from one location while the theme, model and plugins are loaded 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`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  base_url: '/my/tinymce/dir'
});
```

### `cache_suffix`

This option allows a custom cache buster URL part to be added at the end of each request TinyMCE makes to load CSS, scripts, etc. Just add the query string part that should be appended to each URL request, for example "?v=4.1.6".

**Type:** `String`

#### Example: using `cache_suffix`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  cache_suffix: '?v=4.1.6'
});
```

### `content_security_policy`

This option allows a custom content security policy to be set for the editor’s iframe contents.

**Type:** `String`

#### Example: using `content_security_policy`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_security_policy: "default-src 'self'"
});
```

### `referrer_policy`

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`

For a list of valid referrer policies (directives), see: [MDN Web Docs - Referrer-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy).

#### Example: using `referrer_policy`

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

### `suffix`

This option allows the suffix of TinyMCE to be manually provided. 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`

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