---
title: "Changing user formatting controls"
description: "Options for changing menu and toolbar dropdown formatting options available to users."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/index.md"
version: "latest"
last_updated: "2025-09-01T23:01:47Z"
tokens: 6996
---
# Changing user formatting controls

## `block_formats`

This option defines the formats to be displayed in the `blocks` dropdown toolbar button and the `blocks` menu item. Each item in the string should be separated by semi-colons and specified using the form `title=block`.

**Type:** `String`

**Default value:** `'Paragraph=p; Heading 1=h1; Heading 2=h2; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6; Preformatted=pre'`

### Example: using `block_formats`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3'
});
```

## `default_font_stack`

This option changes the default font stack that is considered as the "System Font" stack in the fontfamily toolbar and menu items. It’s should be an
array of font family names that matches the default fonts in the the configured [content_css](../add-css-options/#content_css) CSS file.

**Type:** `Array`

**Default value:** `[ '-apple-system', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'sans-serif' ]`

### Example: using `default_font_stack`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'fontsize',
  default_font_stack: [ '-apple-system', 'Arial' ]
});
```

## `font_family_formats`

This option defines the fonts to be displayed in the `fontfamily` dropdown toolbar button and the `fontfamily` menu item. Each item in the string should be separated by semi-colons and specified using the form of: `title=font-family`.

**Type:** `String`

**Default value:**

```js
'Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats'
```

### Example: using `font_family_formats`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'fontfamily',
  font_family_formats: 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; AkrutiKndPadmini=Akpdmi-n'
});
```

## `font_size_formats`

This option allows you to override the font sizes displayed in the `fontsize` dropdown toolbar button and the `fontsize` menu item. Each item in the string should be space or comma-separated and include units.

**Type:** `String`

**Default value:** `'8pt 10pt 12pt 14pt 18pt 24pt 36pt'`

### Example: using `font_size_formats`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'fontsize',
  font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt'
});
```

## `font_size_input_default_unit`

This option sets the default unit of measure for typeface sizes as input in, for example, the `fontsizeinput` toolbar button’s text-entry field.

Numbers entered in the `fontsizeinput` toolbar without a qualifying unit of measure will be calculated using the unit of measure set.

**Type:** `String`

**Default value:** `pt`

**Possible values:** `pt`, `px`, `em`, `cm`, `mm`

> **Note:** If `font_size_input_default_unit` is set to an invalid value (ie, any string other than one of the **possible values** listed above), the setting is ignored. In such a case, numbers entered in the `fontsizeinput` toolbar without a qualifying unit of measure are also ignored.

### Example: using `font_size_input_default_unit`

```js
tinymce.init({
    selector: "textarea",  // change this value according to your HTML
    toolbar: "fontsizeinput",
    font_size_input_default_unit: "pt"
});
```

## `line_height_formats`

This option allows you to override the line heights displayed in the `lineheight` dropdown toolbar button and the `lineheight` menu item. Each item in the string should be space separated.

**Type:** `String`

**Default value:** `'1 1.1 1.2 1.3 1.4 1.5 2'`

### Example: using `line_height_formats`

```js
tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  toolbar: 'lineheight',
  line_height_formats: '1 1.2 1.4 1.6 2'
});
```

## `indentation`

This option allows specification of the indentation level for indent/outdent buttons in the UI.

The **indentation** option defaults to 30px but can be any value.

**Type:** `String`

**Default value:** `'40px'`

### Example: using `indentation`

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

## `indent_use_margin`

This option is set if the editor should use margin instead of padding when indenting content.

**Type:** `Boolean`

**Default value:** `false`

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

### Example: using `indent_use_margin`

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

## `preview_styles`

This option lets you configure the preview of styles in format/style listboxes. Enter a string with the styles that you wish to preview separated by a blankspace, or disable the preview of all styles by setting it to `false`.

If unset the editor will preview the styles listed in the default value listed below.

**Type:** `Boolean` or `String`

**Default value:** `'font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow'`

**Possible values:** `String`, `false`

### Example: using `preview_styles`

No preview of styles:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  mode: 'textareas',
  preview_styles: false
});
```
Preview of only font-size and color:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  mode: 'textareas',
  preview_styles: 'font-size color'
});
```

## `style_formats`

This option allows you to define custom items for the `styles` dropdown toolbar button and the `styles` menu item.

There are four types of items the array can contain:

- **Style:** The item must have a `title` and the necessary fields to [specify a new format](../content-formatting/#format-type). An optional `name` can be provided for the style, which will be prefixed with `custom-` to ensure that it does not override the default editor formats. If given a unique `name`, the style can be used with the formatting API. The item will be rendered in the UI as a clickable item that applies the given format.
- **Style reference:** The item must have a `title` and a `format` which refers to a pre-registered editor [format](../content-formatting/#formats). The item will be rendered in the UI as a clickable item that applies the given format.
- **Nested menu:** The item must have a `title` and an `items` array that contains other items that will be rendered as a sub-menu.
- **Group heading:** The item must only have a `title` and will be rendered as a non-clickable heading within the menu. This is useful for grouping items without using nested menus.

To merge custom styles with the default `styles_format` values, set [`style_formats_merge`](#style_formats_merge) to `true`.

**Type:** `Array`

**Default value:** The following is the default value for `style_formats` where it is using references to existing formats:

```js
style_formats: [
  { title: 'Headings', items: [
    { title: 'Heading 1', format: 'h1' },
    { title: 'Heading 2', format: 'h2' },
    { title: 'Heading 3', format: 'h3' },
    { title: 'Heading 4', format: 'h4' },
    { title: 'Heading 5', format: 'h5' },
    { title: 'Heading 6', format: 'h6' }
  ]},
  { title: 'Inline', items: [
    { title: 'Bold', format: 'bold' },
    { title: 'Italic', format: 'italic' },
    { title: 'Underline', format: 'underline' },
    { title: 'Strikethrough', format: 'strikethrough' },
    { title: 'Superscript', format: 'superscript' },
    { title: 'Subscript', format: 'subscript' },
    { title: 'Code', format: 'code' }
  ]},
  { title: 'Blocks', items: [
    { title: 'Paragraph', format: 'p' },
    { title: 'Blockquote', format: 'blockquote' },
    { title: 'Div', format: 'div' },
    { title: 'Pre', format: 'pre' }
  ]},
  { title: 'Align', items: [
    { title: 'Left', format: 'alignleft' },
    { title: 'Center', format: 'aligncenter' },
    { title: 'Right', format: 'alignright' },
    { title: 'Justify', format: 'alignjustify' }
  ]}
]
```

### Example: using `style_formats`

This example shows how to append 3 new style formats.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  style_formats: [
    { title: 'Bold text', inline: 'b' },
    { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
    { name: 'my-inline', title: 'My inline', inline: 'span', classes: [ 'my-inline' ] }
  ],
  // The following option is used to append style formats rather than overwrite the default style formats.
  style_formats_merge: true
});
```

### Interactive examples

This example shows you how to:

- Override the built-in [formats](../content-formatting/#formats).
- Add some custom styles to the `styles` dropdown toolbar button and the `styles` menu item using the [style_formats](#style_formats) configuration option.

**Example**

```js
tinymce.init({
  selector: 'textarea#format-custom',
  height: 500,
  plugins: 'table wordcount',
  content_style: '.left { text-align: left; } ' +
    'img.left, audio.left, video.left { float: left; } ' +
    'table.left { margin-left: 0px; margin-right: auto; } ' +
    '.right { text-align: right; } ' +
    'img.right, audio.right, video.right { float: right; } ' +
    'table.right { margin-left: auto; margin-right: 0px; } ' +
    '.center { text-align: center; } ' +
    'img.center, audio.center, video.center { display: block; margin: 0 auto; } ' +
    'table.center { margin: 0 auto; } ' +
    '.full { text-align: justify; } ' +
    'img.full, audio.full, video.full { display: block; margin: 0 auto; } ' +
    'table.full { margin: 0 auto; } ' +
    '.bold { font-weight: bold; } ' +
    '.italic { font-style: italic; } ' +
    '.underline { text-decoration: underline; } ' +
    '.example1 {} ' +
    'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }' +
    '.tablerow1 { background-color: #D3D3D3; }',
  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' },
    alignfull: { 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' },
    customformat: { inline: 'span', styles: { color: '#00ff00', fontSize: '20px' }, attributes: { title: 'My custom format'} , classes: 'example1'}
  },
  style_formats: [
    { title: 'Custom format', format: 'customformat' },
    { title: 'Align left', format: 'alignleft' },
    { title: 'Align center', format: 'aligncenter' },
    { title: 'Align right', format: 'alignright' },
    { title: 'Align full', format: 'alignfull' },
    { title: 'Bold text', inline: 'strong' },
    { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
    { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
    { title: 'Badge', inline: 'span', styles: { display: 'inline-block', border: '1px solid #2276d2', 'border-radius': '5px', padding: '2px 5px', margin: '0 2px', color: '#2276d2' } },
    { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' },
    { title: 'Image formats' },
    { title: 'Image Left', selector: 'img', styles: { 'float': 'left', 'margin': '0 10px 0 10px' } },
    { title: 'Image Right', selector: 'img', styles: { 'float': 'right', 'margin': '0 0 10px 10px' } },
  ]
});
```
This example shows you how to edit HTML5 content such as sections and articles.

**Example**

```js
tinymce.init({
  selector: 'textarea#format-html5',
  height: 500,
  plugins: 'visualblocks',
  style_formats: [
    { title: 'Headers', items: [
      { title: 'h1', block: 'h1' },
      { title: 'h2', block: 'h2' },
      { title: 'h3', block: 'h3' },
      { title: 'h4', block: 'h4' },
      { title: 'h5', block: 'h5' },
      { title: 'h6', block: 'h6' }
    ] },

    { title: 'Blocks', items: [
      { title: 'p', block: 'p' },
      { title: 'div', block: 'div' },
      { title: 'pre', block: 'pre' }
    ] },

    { title: 'Containers', items: [
      { title: 'section', block: 'section', wrapper: true, merge_siblings: false },
      { title: 'article', block: 'article', wrapper: true, merge_siblings: false },
      { title: 'blockquote', block: 'blockquote', wrapper: true },
      { title: 'hgroup', block: 'hgroup', wrapper: true },
      { title: 'aside', block: 'aside', wrapper: true },
      { title: 'figure', block: 'figure', wrapper: true }
    ] }
  ],
  visualblocks_default_state: true,
  end_container_on_empty_block: true,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

## `style_formats_autohide`

This option enables auto hiding of styles that can’t be applied to the current context. For example: if a style applies only to tables, it wouldn’t be visible in the styles drop down when the caret isn’t inside a table. By default, irrelevant menu items are disabled

**Type:** `Boolean`

**Default value:** `false`

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

### Example: using `style_formats_autohide`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  style_formats: [
    { title: 'Red cell', selector: 'td', classes: 'red' },
    { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } }
  ],
  style_formats_autohide: true
});
```

## `style_formats_merge`

This option allows you to set whether TinyMCE should append custom styles defined using the [`style_formats`](#style_formats) setting to the default style formats or completely replace them.

**Type:** `Boolean`

**Default value:** `false`

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

### Example: using `style_formats_merge`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  style_formats: [
    { title: 'Bold text', inline: 'b' },
    { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } }
  ],
  style_formats_merge: true
});
```

## Text color options

These options affect the color selector shown when using the `forecolor` (text color) and `backcolor` (text background) toolbar buttons or menu items. The dimensions and mapping of the grid of text colors can be set here.

### `color_cols`

This option allows for specifying the number of columns for text color grids. The number of rows is calculated based on the number of text colors supplied divided by the specified number of columns.

By default, the number of rows and columns is dependent of the number of colors specified using [`color_map`](#color_map). The dimensions of the grid will be calculated by TinyMCE to keep the grid a square or a rectangle with a minimum of 5 columns.

**Type:** `Integer`

#### Example: using `color_cols`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'forecolor backcolor',
  color_cols: 5
});
```

### `color_cols_background`

This option specifies the number of columns for background text color grids.

If `color_cols_background` is not set, the number of columns a highlight color grid takes is set by the [`color_cols`](#color_cols) option.

If both `color_cols` and `color_cols_background` options are set, the `color_cols_background` value is used.

If neither `color_cols` nor `color_cols_background` options are set, the highlight color grid presents with the default number of columns, **5**.

**Type:** `Number`

**Default value:** 5

#### Example: using `color_cols_background`

This example sets the number of columns in the default color grid to **10** then sets the background text color grid to display **3** columns.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar: 'backcolor forecolor',
  color_cols: 10,
  color_cols_background: 3,
});
```

### `color_cols_foreground`

This option specifies the number of columns for foreground text color grids.

If `color_cols_foreground` is not set, the number of columns a foreground text color grid takes is set by the [`color_cols`](#color_cols) option.

If both `color_cols` and `color_cols_foreground` options are set, the `color_cols_foreground` value is used.

If neither `color_cols` nor `color_cols_foreground` options are set, text color grid presents with the default number of columns, **5**.

**Type:** `Integer`

**Default value:** 5

#### Example: using `color_cols_foreground`

This example sets the number of columns in the default color grid to **10** then sets the foreground text color grid to display **3** columns.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar: 'backcolor forecolor',
  color_cols: 10,
  color_cols_foreground: 3,
});
```

### `color_map`

This option allows for specifying a map of the text colors that will appear in the grid.

Colors are added to the array with a Hex or RGB color value, followed by the name of that color as it would appear in the color grid when hovered over. Both values are required for each color added to the color map.

**Type:** `Array`

#### Example: using `color_map`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'forecolor backcolor',
  color_map: [
    '000000', 'Black',
    '808080', 'Gray',
    'FFFFFF', 'White',
    'FF0000', 'Red',
    'FFFF00', 'Yellow',
    '008000', 'Green',
    '0000FF', 'Blue'
  ]
});
```
If `color_map` is not explicitly set, TinyMCE populates color grids with a default set of 22 colors.

#### Example: explicitly setting `color_map` to the default TinyMCE color set

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'forecolor backcolor',
  color_map: [
    '#BFEDD2', 'Light Green',
    '#FBEEB8', 'Light Yellow',
    '#F8CAC6', 'Light Red',
    '#ECCAFA', 'Light Purple',
    '#C2E0F4', 'Light Blue',
    '#2DC26B', 'Green',
    '#F1C40F', 'Yellow',
    '#E03E2D', 'Red',
    '#B96AD9', 'Purple',
    '#3598DB', 'Blue',
    '#169179', 'Dark Turquoise',
    '#E67E23', 'Orange',
    '#BA372A', 'Dark Red',
    '#843FA1', 'Dark Purple',
    '#236FA1', 'Dark Blue',
    '#ECF0F1', 'Light Gray',
    '#CED4D9', 'Medium Gray',
    '#95A5A6', 'Gray',
    '#7E8C8D', 'Dark Gray',
    '#34495E', 'Navy Blue',
    '#000000', 'Black',
    '#ffffff', 'White'
  ]
});
```

### `color_map_raw`

The `color_map_raw` option specifies a map of text colors that appear in the color picker grid. This configuration provides detailed control over the colors available for the `forecolor` and `backcolor` toolbar options. The following example shows how to set the color map using CSS variables, color functions, and hex codes.

**Type:** `Array`

#### Example: using `color_map_raw`

```js
tinymce.init({
  selector: 'textarea', // Adjust this value according to your HTML
  toolbar: 'forecolor backcolor',
  color_map_raw: [
    'var(--black)', 'Black', // CSS variable-based colors
    'var(--red)', 'Red',
    'hsb(0, 100%, 100%)', 'White hsb', // Color functions like hsb() and hsl()
    'hsl(0, 100%, 50%)', 'Red hsl',
    '#ff00ff', 'Pink', // Hex code-based colors
    '#00ffff', 'Cyan',
    'var(--purple)', 'Purple', // User-friendly labels for easy identification such as 'Purple'.
    '#00FF7F', 'Spring Green'
  ],
});
```

### `color_map_background`

This option allows for specifying a map of the text colors that will appear in the highlight color grid.

If it is not set, the highlight color grid takes it values from the `color_map` array.

And, if the `color_map` array is, further, not set, the highlight color grid takes it values from the TinyMCE default color set.

That is, the highlight grid takes its values in the following priority order:

1. a set `color_map_background` color array is used in preference to
2. a set `color_map` color array, which is used in preference to
3. the default TinyMCE color array.

**Type:** `Array`

#### Example: using `color_map_background`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar: 'forecolor backcolor',
  color_map_background: [
    '000000', 'Black',
    '808080', 'Gray',
    'FFFFFF', 'White',
    'FF0000', 'Red',
    'FFFF00', 'Yellow',
    '008000', 'Green',
    '0000FF', 'Blue'
  ]
});
```

### `color_map_foreground`

This option allows for specifying a list of the text colors that will appear in the text color grid.

If it is not set, the text color grid takes it values from the set `color_map` array.

And, if the `color_map` array is, further, not set, the text color grid takes it values from the TinyMCE default color set.

That is, the text color grid takes its values in the following priority order:

1. a set `color_map_foreground` color array is used in preference to
2. a set `color_map` color array, which is used in preference to
3. the default TinyMCE color array.

**Type:** `Array`

#### Example: using `color_map_foreground`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar: 'forecolor backcolor',
  color_map_foreground: [
    '000000', 'Black',
    '808080', 'Gray',
    'FFFFFF', 'White',
    'FF0000', 'Red',
    'FFFF00', 'Yellow',
    '008000', 'Green',
    '0000FF', 'Blue'
  ]
});
```
End-user customisation of text color grids
```
When end-users add a new custom color via a text color grid, that color is added to the associated text color grid but the new custom color is only held in the host browser’s local storage.

If, for example, an end-user adds a custom color to the foreground text color grid, that new color is presented in the foreground text color grid in the end-user’s {productname} instance. The new custom color is not, however, stored in any of the instance’s color map arrays.

Also, when a user adds a custom color to one palette (for example, the `color_map_background` palette), the {productname} editor instance does not replicate the new custom color in the complementary palette (for example, the `color_map_foreground` palette).
```

### `color_default_background`

This option allows the user to replace the `background` default color for the toolbar buttons and menu items.

Once set, the background color for the toolbar button will then render the new color set in the `color_default_background` options.  This will then apply the new `background` color to any text that has been selected after the button is pressed.

Assuming a `color_map` is also set (and it is set by default) other colors in the `color_map` are visible by opening the `backcolor` toolbar’s menu.

**Type:** `String`

#### Example: using `color_default_background`

```js
tinymce.init({
  selector: "textarea",  // change this value according to your html
  toolbar: 'forecolor backcolor',
  color_default_background: 'yellow',
});
```

### `color_default_foreground`

This option allows the user to replace the `foreground` default color for the toolbar buttons and menu items.

Once set, the foreground color for the toolbar button will then render the new color set in the `color_default_foreground` options.  This will then apply the new `foreground` color to any text that has been selected after the button is pressed.

Assuming a `color_map` is also set (and it is set by default) other colors in the `color_map` are visible by opening the `forecolor` toolbar’s menu.

**Type:** `String`

#### Example: using `color_default_foreground`

```js
tinymce.init({
  selector: "textarea",  // change this value according to your html
  toolbar: 'forecolor',
  color_default_foreground: 'red',
});
```

#### The default `color_map`

```js
color_map: [
  '#BFEDD2', 'Light Green',
  '#FBEEB8', 'Light Yellow',
  '#F8CAC6', 'Light Red',
  '#ECCAFA', 'Light Purple',
  '#C2E0F4', 'Light Blue',

  '#2DC26B', 'Green',
  '#F1C40F', 'Yellow',
  '#E03E2D', 'Red',
  '#B96AD9', 'Purple',
  '#3598DB', 'Blue',

  '#169179', 'Dark Turquoise',
  '#E67E23', 'Orange',
  '#BA372A', 'Dark Red',
  '#843FA1', 'Dark Purple',
  '#236FA1', 'Dark Blue',

  '#ECF0F1', 'Light Gray',
  '#CED4D9', 'Medium Gray',
  '#95A5A6', 'Gray',
  '#7E8C8D', 'Dark Gray',
  '#34495E', 'Navy Blue',

  '#000000', 'Black',
  '#ffffff', 'White'
]
```

### `custom_colors`

This option allows disabling the custom color picker in all color swatches of the editor.

**Type:** `Boolean`

**Default value:** `true`

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

#### Example: using `custom_colors`

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

## `list_max_depth`

The `list_max_depth` option sets the maximum nesting depth for lists (ordered and unordered).

**Type:** `Number`

**Default value:** No limit

### Required plugins

This option requires the `lists` plugin to be enabled.

### Example

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'lists',
  toolbar: 'bullist numlist',
  list_max_depth: 2  // limits list nesting to maximum of 2 levels
});
```