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 specifies how the current container block element is split when the Enter key is pressed inside an empty inner block element. The available options are:

  • always split the block;

  • split for specific block elements; or

  • do not split the block at all.

Type: Boolean or String

Default value: 'blockquote'

Possible values: true, false or a comma separated String of element tag names

Prior to TinyMCE 6.1, this option only accepted Boolean values.

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
});

newdocument_content

This option sets the content a new editor contains when the File → New document menu item is invoked.

Type: String

Default value: ''

Example: using newdocument_content

This example shows newdocument_content being used with the editable_root option to set an editable element within a non-editable root.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  editable_root: false,
  newdocument_content: '<div contenteditable="true">Editable content</div>'
});

newline_behavior

This feature is only available for TinyMCE 6.1 and later.

This option enables you to adjust what happens when Enter or Return is pressed. There are four options:

  • default inserts a block (defined by forced_root_block) on Enter, and a br tag on Shift+Enter.

  • block forces the above Enter behavior in all cases.

  • linebreak forces the above Shift+Enter behavior in all cases.

  • invert swaps Enter and Shift+Enter behaviors.

This option changes the behavior of the mceInsertNewLine command. insertParagraph and InsertLineBreak commands are not affected.

Type: String

Default value: 'default'

Example: using newline_behavior

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

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.

text_patterns_lookup

This option allows the specification of a function that dynamically appends additional text patterns to the default text_patterns. The function takes a context object as an argument and returns an array of text patterns. This function is called whenever the editor triggers text pattern matching.

Type: Function

Example: using text_patterns_lookup

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  text_patterns_lookup: (ctx) => {
    const parentTag = ctx.block.nodeName.toLowerCase();
    if (parentTag === 'pre') {
      return [
        { start: '`', end: '`', format: 'code' }
      ];
    } else if (parentTag === 'p') {
      return [
        { start: '*', end: '*', format: 'bold' }
      ];
    } else if (parentTag === 'span') {
      return [
        // ctx.text is the string from the start of the block to the cursor
        { start: 'brb', replacement: ctx.text + ': Be Right Back' }
      ];
    } else {
      return [];
    }
  }
});

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
});