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;

Example: Using block_formats

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

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:

'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

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

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

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

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: '30px'

Example: Using indentation

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

Example: Using indent_use_margin

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:

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

Preview of only font-size and color:

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. 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. 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 to true.

Type: Array

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

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.

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.

  • Add some custom styles to the styles dropdown toolbar button and the styles menu item using the style_formats configuration option.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="format-custom">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h2>Welcome to the TinyMCE editor demo!</h2>
  <p>
    Please try out the features provided in this custom formats example.
  </p>

  <h2>Got questions or need help?</h2>
  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>
  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2>Finally ...</h2>
  <p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>
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.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="format-html5">
  <section>
    Section
    <p>Paragraph</p>
  </section>
  <article>
    Article
    <p>Paragraph</p>
  </article>
  <blockquote>
    Blockquote
    <p>Paragraph</p>
  </blockquote>
  <aside>
    Section
    <p>Paragraph</p>
  </aside>
  <figure>
    Figure
    <figcaption>Figcaption</figcaption>
  </figure>
</textarea>
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

Example: Using style_formats_autohide

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 setting to the default style formats or completely replace them.

Type: Boolean

Default value: false

Example: Using style_formats_merge

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

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

color_map

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

Type: Array

Example: Using color_map

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

The default color_map

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

Example: Using custom_colors

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