---
title: "Editor content behaviors"
description: "Options for changing the behavior of editor content."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/index.md"
version: "6"
last_updated: "2024-02-13T00:35:02Z"
tokens: 3725
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/content-behavior-options/).
# 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`

```js
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

> **Note:** Prior to TinyMCE 6.1, this option only accepted `Boolean` values.

### Example: using `end_container_on_empty_block`

```js
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](../dialog/).

**Type:** `Boolean`

**Default value:** `false`

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

### Example: using `draggable_modal`

```js
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`

```js
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](../available-menu-items/#the-core-menu-items) menu item is invoked.

**Type:** `String`

**Default value:** `''`

### Example: using `newdocument_content`

This example shows `newdocument_content` being used with the [`editable_root`](#editable_root) option to set an editable element within a non-editable root.

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

## `newline_behavior`

> **Note:** 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](../content-filtering/#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.

> **Note:** 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`

```js
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

> **Note:** 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](../tinymce-for-mobile/#mobile-defaults-for-selected-options).

#### Example: disable object resizing

```js
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

```js
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:

```js
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](../editor-content-css/).

**Type:** `Boolean`

**Default value:** `true`

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

### Example: using `inline_boundaries`

```js
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](../editor-content-css/) for details.

**Type:** `String`

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

### Example: using `inline_boundaries_selector`

```js
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.

> **Important:** 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:
> 
> - Registering formats for TinyMCE, see: [Content formatting options - `formats`](../content-formatting/#formats).
> - Registering commands for TinyMCE, see: [TinyMCE APIs - addCommand](../apis/tinymce.editor/#addCommand).
**Type:** `Array` or `false`

**Default value:**

```js
[
  { 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.

> **Note:** Inline patterns are executed on either pressing the **spacebar** or the **Enter** key.

#### Example: using inline patterns

```js
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.

> **Note:** Block patterns are only executed on **Enter**, **not** on pressing the **spacebar**.

#### Example: using block patterns

```js
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.

> **Note:** Replacement patterns are executed on either pressing the **spacebar** or the **Enter** key.

#### Example: using replacement patterns

```js
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](#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

```js
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`

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