--- title: "Content formatting options" description: "These options change the way the editor handles the input and output of content. This will help you to create clean, maintainable and readable content." canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/content-formatting/" md_url: "https://www.tiny.cloud/docs/tinymce/latest/content-formatting/index.md" version: "latest" last_updated: "2026-07-28T23:36:14Z" tokens: 5502 --- # Content formatting options The options on this page define and customize the text formats available in the editor. To restrict, disable, or strip HTML formatting from content, such as limiting the allowed elements or removing formatting from pasted text, see [Disabling or stripping HTML formatting](../content-filtering/#disabling-or-stripping-html-formatting). ## `formats` This option is used to override default TinyMCE **formats** or add custom **formats** to the editor. TinyMCE is equipped with a formatting engine that allows you to register a set of styles and attributes as a named **format**. For example, the `bold` format is the style that is applied to text when the bold button is clicked. Check out the [custom formats example](../user-formatting-options/#style_formats) for a demonstration of this option. The `formats` configuration option takes an object of format name and format specification pairs. Each format specification must be defined as an object where the value is either an object of format options or an array of such objects. If a format is specified with an array of variants, when the format is applied only the first item in the array will be used. However, when trying to match the format to remove or update the UI, the other variants in the array will be considered as well. So the first format is a kind of primary format, and the rest are secondary formats. The following is an example of an array of format specification that contains three variants: ```js bold: [ { inline: 'strong', remove: 'all' }, { inline: 'span', styles: { fontWeight: 'bold' } }, { inline: 'b', remove: 'all' } ], ``` ### Style merging Similar elements and styles are merged by default to reduce the output HTML size. So for example, if a font size and font face are selected for a word, it merges these two styles into one `span` element instead of one `span` for **each format type**. ### Built-in formats The following formats are provided by TinyMCE. #### General built-in formats The following formats will work on most content. | Format option | Description | | --- | --- | | `alignleft` | Left alignment. | | `aligncenter` | Center alignment. | | `alignright` | Right alignment. | | `alignjustify` | Justified alignment. | | `bold` | Bold elements or styling. | | `italic` | Italic elements or styling. | | `underline` | Underline styling. | | `strikethrough` | Strike-through styling. | | `blockquote` | Blockquote (`
`) elements. | | `subscript` | Subscript (``) elements. | | `superscript` | Superscript (``) elements. | | `code` | Code (``) elements. | | `p` | Paragraph (`

`) elements. | | `h1` | Level 1 heading (`

`) elements. | | `h2` | Level 2 heading (`

`) elements. | | `h3` | Level 3 heading (`

`) elements. | | `h4` | Level 4 heading (`

`) elements. | | `h5` | Level 5 heading (`

`) elements. | | `h6` | Level 6 heading (`
`) elements. | | `div` | Division (`
`) blocks. | | `address` | Address (`
`) elements. | | `pre` | Preformated (`
`) blocks. |
| `samp` | Sample (``) blocks. |
| `forecolor` | The text color. |
| `hilitecolor` | The text highlight color. |
| `fontname` | Font name. Such as `'comic sans'`. |
| `fontsize` | Font size. Such as `'30px'`. |
| `fontsize_class` | Font size (1-7). |

> **Note:** The `mceToggleFormat` and `FormatBlock` [commands](../editor-command-identifiers/) do not accept the following formats:
> 
> - `forecolor`
> - `hilitecolor`
> - `fontname`
> - `fontsize`
> - `fontsize_class`

#### Definition list related formats

The following formats work within definition lists (`
`).

| Format option | Description |
| --- | --- |
| `dt` | Definition title (`
`) elements. |
| `dd` | Definition data (`
`) elements. |

#### Link related formats

The following formats will work on links (``).

| Format option | Description |
| --- | --- |
| `link` | Link (``) elements. |

#### Table related formats

The following formats will work within tables on `` and `` elements.

| Format option | Description |
| --- | --- |
| `valigntop` | Aligns the cell content to the top of the cell. |
| `valignmiddle` | Aligns the cell content to the middle of the cell. |
| `valignbottom` | Aligns the cell content to the bottom of the cell. |

Some built-in formats `fontsize`, `fontname`, `forecolor`, `hilitecolor` use a variable in their definition named `%value`. This gets replaced with the user selected item such as a `color` value. Check the variable substitution section below for details.

### Format Type

There are three types of formats:

- Block format
- Inline format
- Selector format

All three format types can be used with the `formats` configuration option. They can also be used to specify a new format item in the [`style_formats`](../user-formatting-options/#style_formats) configuration option. However, a format that is specified using `formats` is then registered with the editor, and can be referred to by name in `style_formats` rather than needing to specify the format again.

For example, these two configurations are equivalent:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    // Changes the default format for h1 to have a class of heading
    h1: { block: 'h1', classes: 'heading' }
  },
  style_formats: [
    // Adds the h1 format defined above to style_formats
    { title: 'My heading', format: 'h1' }
  ]
});
```

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  style_formats: [
    // Adds a h1 format to style_formats that applies a class of heading
    { title: 'My heading', block: 'h1', classes: 'heading' }
  ]
});
```
A registered format can also be used by name with the built-in [Using custom formats](../user-formatting-options/#using-custom-formats) for an example.

#### `block`

Tag name of the block element to use as a wrapper, for example, `h1`. Existing block elements within the selection are replaced with this block element.

**Type:** `String`

##### Example: using `block` format

```js
tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  formats: {
    // Changes the default format for h1 to have a class of heading
    h1: { block: 'h1', classes: 'heading' }
  }
});
```

#### `inline`

Tag name of the inline element to use as a wrapper, for example, `span` is used to wrap the current selection.

**Type:** `String`

##### Example: using `inline` format

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    // Changes the default format for the bold button to produce a span with a bold class
    bold: { inline: 'span', classes: 'bold' }
  }
});
```

#### `selector`

CSS3 selector pattern that is used to find elements within the selection. It can be used to apply classes to specific elements only, for example only to odd rows in a table.

**Type:** `String`

##### Example: using `selector` format

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    // Changes the alignment buttons to add a class to each of the matching selector elements
    alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'left' },
    aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'center' },
    alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'right' },
    alignjustify: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'full' }
  }
});
```

### Format parameters

For each format some additional parameters can be specified:

#### `classes`

Space-separated list of classes that are:

- Applied to newly created block or inline elements.
- Appended to existing classes on block or inline elements.

To replace existing classes, use the `class` attribute.

**Type:** `String`

##### Example: using `classes` parameter

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    // Changes the default format for the bold button to produce a span with a bold class
    bold: { inline: 'span', classes: 'bold' }
  }
});
```

#### `styles`

Key/value object with CSS styles to apply to the selected or newly created inline/block element (e.g. `color`, `backgroundColor`, `textDecoration`, etc).

**Type:** `Object`

##### Example: using `styles` parameter

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    // Changes the default format for the bold button to produce a span with style with font-width: bold
    bold: { inline: 'span', styles: { 'font-weight': 'bold' } }
  }
});
```

#### `attributes`

Key/value object with attributes to apply to the selected or newly created inline/block element.

**Type:** `Object`

##### Example: using `attributes` parameter

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    // Changes the default format for the bold button to produce a strong with data-style attribute
    bold: { inline: 'strong', attributes: { 'data-style': 'bold' } }
  }
});
```

##### Example: using `class` in the attributes parameter

To apply a class to new or selected existing elements, add the `'class'` attribute to the `attributes` parameter. The provided class will replace any existing classes on the element when the format is applied.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    // Changes the default format for the bold button to produce a span with a bold class
    bold: {
      inline: 'span',
      attributes: { class: 'bold' }
    }
  }
});
```

#### `exact`

Makes sure that the format is not merged with other wrappers having the same format. We use it to avoid conflicts between text-decorations for `underline` and `strikethrough` formats.

**Type:** `Boolean`

**Default value:** `false`

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

##### Example: using `exact` parameter

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    // Changes the default format for the underline button to produce a span with a class and not merge that underline into parent spans
    underline: { inline: 'span', styles: { 'text-decoration': 'underline' }, exact: true },
    strikethrough: { inline: 'span', styles: { 'text-decoration': 'line-through' }, exact: true }
  }
});
```

#### `wrapper`

States that the format is a container format for block elements. For example, a `div` wrapper or `blockquote`.

**Type:** `Boolean`

**Default value:** `false`

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

##### Example: using `wrapper`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    // A custom format that wraps blocks into a div with the specified wrapper class
    'custom-wrapper': { block: 'div', classes: 'wrapper', wrapper: true }
  }
});
```

#### `remove`

Specifies what the remove behavior of the element should be when the format is removed.

**Type:** `String`

**Default value:** `none` for `Selector` formats and `empty` for all other format types.

This can be set to three different modes:

- **none**: Only styles, classes or attributes are removed from the element the element is never removed.
- **empty**: If the element has no styles, classes, or attributes then the element is removed.
- **all**: Removes the element regardless of its styles, classes, and or attributes.

##### Example: using `remove`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  extended_valid_elements: 'span[*]', // Needed to retain spans without attributes these are removed by default
  formats: {
    removeformat: [
      // Configures `clear formatting` to remove specified elements regardless of its attributes
      { selector: 'b,strong,em,i,font,u,strike,s', remove: 'all' },

      // Configures `clear formatting` to remove the class red from spans and if the element then becomes empty i.e has no attributes it gets removed
      { selector: 'span', classes: 'red', remove: 'empty' },

      // Configures `clear formatting` to remove the class green from spans and if the element then becomes empty it's left intact
      { selector: 'span', classes: 'green', remove: 'none' }
    ]
  }
});
```

#### `block_expand`

This option controls if the selection should expand upwards to the closest matching block element. This can be useful when configuring `removeformat` to remove block elements. So if the selection start is at the beginning of a matching block, then that matching block will be included as well. If the end of the selection is at the end of a matching block element then that parent element will be included as well.

So if the selection is from *a* to *b* in this html contents `
[a
b]
` then the *h1* will be removed even if it’s not part of the actual selection.

**Type:** `Boolean`

**Default value:** `false`

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

##### Example: using `block_expand`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    removeformat: [
      {
        selector: 'h1,h2,h3,h4,h5,h6',
        remove: 'all',
        split: false,
        expand: false,
        block_expand: true,
        deep: true
      },
      {
        selector: 'b,strong,em,i,font,u,strike,s,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins,small',
        remove: 'all',
        split: true,
        expand: false,
        deep: true
      },
      { selector: 'span', attributes: ['style', 'class'], remove: 'empty', split: true, expand: false, deep: true },
      { selector: '*', attributes: ['style', 'class'], split: false, expand: false, deep: true }
    ]
  }
});
```

#### `expand`

Controls whether the selection is expanded to the enclosing matching selector element before a format is applied or removed. This applies to `selector` formats that are not also `inline` formats. When enabled, if the selection only partially covers a matching element, the range is expanded to cover the whole element. Setting `expand` to `false` restricts the operation to the current selection.

**Type:** `Boolean`

**Default value:** `true` for `selector` formats that are not also `inline` formats

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

##### Example: using `expand`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    removeformat: [
      // Restrict removal to the current selection instead of expanding to the whole matching element
      { selector: 'h1,h2,h3,h4,h5,h6', remove: 'all', expand: false, deep: true }
    ]
  }
});
```

#### `split`

Used when removing a format. Controls whether the element wrapping the selection is split at the selection boundaries so that the format is removed only from the selected text. When set to `false`, the wrapping element is not split, so the format is not removed from a partial selection.

**Type:** `Boolean`

**Default value:** `true` for `inline` formats and non- `selector` formats; `false` for `selector` (block) formats.

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

##### Example: using `split`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    removeformat: [
      // Remove the format without splitting the wrapping element at the selection boundaries
      { selector: 'span', attributes: ['style', 'class'], remove: 'empty', split: false, deep: true }
    ]
  }
});
```

#### `deep`

Enables control for removing the child elements of the matching format. This is set to `false` by default on selector formats. As a result, when a class is removed from a selected table class, disabling `deep` retains the class in the child elements within the other nested tables.

**Type:** `Boolean`

**Default value:** `false` for `selector` formats

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

##### Example: using `deep`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    // A custom format that wraps blocks into a div with the specified wrapper class
    'custom-deep': { inline: 'span', classes: 'myclass', deep: false }
  }
});
```

#### `merge_siblings`

When the `merge_siblings` parameter is set to `false`, two or more similar inline elements will not automatically merge.

When `merge_siblings` is set to `true` the following two HTML elements will be merged automatically.

Before merge:

```html
sometext
```
After merge:

```html
sometext
```
**Type:** `Boolean`

**Default value:** `true`

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

##### Example: using `merge_siblings`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    // A custom format that wraps blocks into a div with the specified wrapper class
    'custom-format': { inline: 'span', classes: 'myclass', merge_siblings: false }
  }
});
```

### Example of usage of the formats option

This example overrides some of the built-in formats and tells TinyMCE to apply classes instead of inline styles. It also includes a custom format that produced `h1` elements with a title attribute and a `red` CSS style.

**Type:** `Object`

#### Example: using the `formats` option

```js
// Output elements in HTML style
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'left' },
    aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'center' },
    alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'right' },
    alignjustify: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'full' },
    bold: { inline: 'span', classes: 'bold' },
    italic: { inline: 'span', classes: 'italic' },
    underline: { inline: 'span', classes: 'underline', exact: true },
    strikethrough: { inline: 'del' },
    forecolor: { inline: 'span', classes: 'forecolor', styles: { color: '%value' } },
    hilitecolor: { inline: 'span', classes: 'hilitecolor', styles: { backgroundColor: '%value' } },
    custom_format: { block: 'h1', attributes: { title: 'Header' }, styles: { color: 'red' } }
  }
});
```

### Using custom formats

Custom formats can be handled through the TinyMCE API. Here is a basic example of usage for the custom format defined above.

```js
// Applying the specified format
tinymce.activeEditor.formatter.apply('custom_format');

// Removing the specified format
tinymce.activeEditor.formatter.remove('custom_format');
```

### Variable substitution

Variables can be used in the format definition. These variables are then replaced with the ones specified in the call to the apply function. Here is an example of how to use variables within formats.

```js
// Registering the special format with a variable
tinymce.activeEditor.formatter.register('custom_format', { inline: 'span', styles: { color: '%value' } });

// Applying the specified format with the variable specified
tinymce.activeEditor.formatter.apply('custom_format', { value: 'red' });
```

### Removing a format

Use the `removeformat` option to specify how the `clear formatting` feature should work in the editor.

**Type:** `Array`

#### Example: removing a format

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  formats: {
    removeformat: [
      {
        selector: 'b,strong,em,i,font,u,strike,s,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins,small',
        remove: 'all',
        split: true,
        block_expand: true,
        expand: false,
        deep: true
      },
      { selector: 'span', attributes: ['style', 'class'], remove: 'empty', split: true, expand: false, deep: true },
      { selector: '*', attributes: ['style', 'class'], split: false, expand: false, deep: true }
    ]
  }
});
```

## `format_empty_lines`

This option allows "inline" formats to be applied to empty lines for multi-line selections. Examples of inline formats include bold (``) and underline (``).

**Type:** `Boolean`

**Default value:** `false`

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

### Example: using `format_empty_lines`

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

## `format_noneditable_selector`

If an element has a `contenteditable="false"` attribute, the `format_noneditable_selector` option allows that element to be wrapped with a format if the element matches the specified selector.

As well, an element with a `contenteditable="false"` attribute that also has the `data-mce-cef-wrappable` attribute can be wrapped with a format.

Wrappable formats include block formats that have the `wrapper` parameter set to `true` and inline formats.

Selector formats are not supported.

> **Note:** Elements with `contenteditable="false"` attributes that contain descendant elements with `contenteditable="true"` attributes are not wrappable. From TinyMCE 8.8.2, selecting such an element and applying an inline format applies that format to each of its editable descendant elements instead of wrapping the element. Removing and toggling an inline format behave the same way.
**Type:** `String`

### Example: using `format_noneditable_selector`

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