Editor content behaviors

custom_undo_redo_levels

This option should contain the number of undo levels to keep in memory. By default, it is set to use an unlimited number of undo levels. The value of custom_undo_redo_levels should be 10 or lower for low-end systems otherwise it steals a lot of memory.

Type: Number

Default value: unlimited

Example: Using custom_undo_redo_levels

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

end_container_on_empty_block

This option allows you to to split the current container block element if the enter key is pressed inside an empty inner block element.

Type: Boolean

Default value: false

Possible values: true, false

Example: Using end_container_on_empty_block

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

draggable_modal

Use the draggable_modal option to enable dragging for modal dialogs.

Type: Boolean

Default value: false

Possible values: true, false

Example: Using draggable_modal

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

keep_styles

The keep_styles option will keep the editor’s current text style when a user presses enter/return.

Type: Boolean

Default value: true

Possible values: true, false

Example: Using keep_styles

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

editable_class

This option allows you to specify the class name that TinyMCE will use to determine which areas of content are editable. This would be the same as contenteditable=true, forcing an element to be editable.

Note that classes with the mceItem prefix are invisible within TinyMCE.

Type: String

Default value: 'mceEditable'

Example: Using editable_class

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

noneditable_class

This option allows you to specify the class name that TinyMCE will use to determine which areas of content are non-editable. This would be the same as contenteditable=false.

Note that classes with the mceItem prefix are invisible within TinyMCE.

Type: String

Default value: 'mceNonEditable'

Example: Using noneditable_class

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

noneditable_regexp

This option is used to specify a regular expression or array of regular expressions that TinyMCE will use to determine which areas of content are non-editable. The regular expressions needs to be global so that all instances within the document are matched. The text content of the matches will be wrapped in spans, hiding the structure and styling while editing.

If elements are matched by the regular expression, the elements will be replaced with spans. Use noneditable_class for elements.

Type: String

Example: Using noneditable_regexp

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  noneditable_regexp: /\d{3}-\d{3}-\d{3}/g // matches 123-456-789
});

object_resizing

This options allows you to turn on/off the resizing handles on images, tables or media objects. This option is enabled by default and allows you to resize table and images. You can also specify a CSS3 selector of what you want to enable resizing on.

Disable all resizing of images/tables

Type: Boolean, String

Default value: true

Possible values: true, false, or a valid CSS selector

The default value for this option is different for mobile devices. For information on the default mobile option, see: TinyMCE Mobile - Configuration options with mobile defaults.

Example: Disable object resizing

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

Enable resizing on images only

Type: Boolean, String

Default value: true

Possible values: true, false, img

Example: Enable object resizing for images

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

resize_img_proportional

When a user resizes an image in the editor, this option controls whether image is resized proportionally or freely. If set to:

  • true — When users resize an image, the image will be resized proportionally (both dimensions of the image are resized by the same percentage of length). Users can freely resize images by holding the Shift key while resizing.

  • false — When users resize an image, the image can be resized freely. Users can proportionally resize images by holding the Shift key while resizing.

Type: Boolean

Default value: true

Possible values: true, false

Example: Using resize_img_proportional

To disable proportional image resizing:

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

inline_boundaries

This option allows you to disable the inline boundaries. For information on how to change the appearance of the inline boundaries see the Boilerplate Content CSS page.

Type: Boolean

Default value: true

Possible values: true, false

Example: Using inline_boundaries

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

inline_boundaries_selector

This option allows you specify what elements the inline boundaries should apply to. This defaults to a[href],code,.mce-annotation but can be extended to include other inline elements such as b, strong, i, and em.

If you add new elements, you need to add CSS selectors for them in the content CSS. See the Boilerplate Content CSS page for details.

Type: String

Default value: 'a[href],code,.mce-annotation'

Example: Using inline_boundaries_selector

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  inline_boundaries_selector: 'a[href],code,b,i,strong,em'
});

text_patterns

This option allows configuring the text patterns that get matched while typing in the editor. Text patterns can be used to apply formats, replace text, or execute commands. By default, basic markdown patterns are enabled so the user can type # text to produce a header or **text** to make text bold. To disable text patterns getting replaced, set the option to false.

There are three types of patterns: inline, block, and replacement patterns. Inline patterns have a start and an end text pattern whereas the block and replacement patterns only have a start. A user can specify the formats to be applied to the selection, commands to be executed, or text to be replaced.

Any formats or commands used in text patterns need to be registered with the editor when it is initialized. This may include enabling relevant plugins, such as the lists plugin. For information on:

Type: Array or false

Default value:

[
  { start: '*', end: '*', format: 'italic' },
  { start: '**', end: '**', format: 'bold' },
  { start: '#', format: 'h1' },
  { start: '##', format: 'h2' },
  { start: '###', format: 'h3' },
  { start: '####', format: 'h4' },
  { start: '#####', format: 'h5' },
  { start: '######', format: 'h6' },
  // The following text patterns require the `lists` plugin
  { start: '1. ', cmd: 'InsertOrderedList' },
  { start: '* ', cmd: 'InsertUnorderedList' },
  { start: '- ', cmd: 'InsertUnorderedList' }
]

Inline patterns

Inline patterns must have the following:

  • A start and an end.

  • A format or a cmd.

    • If cmd is specified, an optional value property is allowed.

This allows for patterns to be used to either apply a format or execute a command, optionally with the given value.

Inline patterns are executed on either pressing the spacebar or the Enter key.

Example: Using inline patterns

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  // The `link` plugin is required for the `createLink` command
  plugin: 'link',
  text_patterns: [
    { start: '*', end: '*', format: 'italic' },
    { start: '**', end: '**', format: 'bold' },
    { start: '~', end: '~', cmd: 'createLink', value: 'https://tiny.cloud' }
  ]
});

Using the configuration in this example:

  • { start: '*', end: '*', format: 'italic' } - Entering text between`*` and then pressing the spacebar will result in the italic format being applied to the text between the * symbols.

  • { start: '**', end: '**', format: 'bold' } - Entering text between`**` and then pressing the spacebar will result in the bold format being applied.

  • { start: '~', end: '~', cmd: 'createLink', value: 'https://tiny.cloud' } - This executes editor.execCommand('createLink', false, 'https://tiny.cloud'), which will wrap the text between the ~ symbols in a link that points to https://tiny.cloud.

Block patterns

Block patterns must have the following:

  • A start

  • A format or a cmd

    • If cmd is specified, an optional value property is allowed.

The block patterns do not have an end property. This allows for patterns to be used to either apply a block format or execute a command, optionally, with the given value.

Block patterns are only executed on Enter, not on pressing the spacebar.

Example: Using block patterns

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  // The `lists` plugin is required for list-related text patterns
  plugin: 'lists',
  text_patterns: [
    { start: '#', format: 'h1' },
    { start: '##', format: 'h2' },
    { start: '###', format: 'h3' },
    { start: '####', format: 'h4' },
    { start: '#####', format: 'h5' },
    { start: '######', format: 'h6' },
    { start: '* ', cmd: 'InsertUnorderedList' },
    { start: '- ', cmd: 'InsertUnorderedList' },
    { start: '1. ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'decimal' } },
    { start: '1) ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'decimal' } },
    { start: 'a. ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'lower-alpha' } },
    { start: 'a) ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'lower-alpha' } },
    { start: 'i. ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'lower-roman' } },
    { start: 'i) ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'lower-roman' } }
  ]
});

Using the configuration in this example:

  • { start: '#', format: 'h1' } - Typing #, some text, and then pressing Enter will convert the text to a h1 heading.

  • Typing 1. followed by a space, the desired text, and then pressing Enter; the editor will convert the text into an ordered list, with the original text as the first list item, and the new line as the second list item. Since we have specified value, this pattern will execute editor.execCommand('InsertOrderedList', false, { 'list-style-type': 'decimal'}).

Replacements patterns

Replacement patterns must have the following:

  • A start.

  • A replacement, which takes a string that can be text or HTML.

Whether a replacement pattern inserts a block or inline element depends on what the replacement string is.

Replacement patterns are executed on either pressing the spacebar or the Enter key.

Example: Using replacement patterns

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  text_patterns: [
    { start: '---', replacement: '<hr/>' },
    { start: '--', replacement: '—' },
    { start: '-', replacement: '—' },
    { start: '(c)', replacement: '©' },
    { start: '//brb', replacement: 'Be Right Back' },
    { start: '//heading', replacement: '<h1 style="color: blue">Heading here</h1> <h2>Author: Name here</h2> <p><em>Date: 01/01/2000</em></p> <hr />' }
  ]
});

Using the configuration in this example:

  • Typing --- and then either pressing the spacebar or the Enter key will insert a horizontal rule block.

  • Typing (c) and then either pressing the spacebar or the Enter key will insert an inline copyright symbol.

This is useful for commonly used phrases or symbols and can be leveraged to create content templates. The last pattern is an example of this.

typeahead_urls

This option controls whether the typeahead url field feature should be enabled or disabled.

Type: Boolean

Default value: true

Possible values: true, false

Example: Using typeahead_urls

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