Content Formatting

These settings change the way the editor handles the input and output of content. This will help you to create clean, maintainable and readable content.

Contribute to this page

block_formats

List of formats to be displayed under formatselect dropdown. Each item in the list should be specified in a form of: title=block and separated by semi-colon.

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

List of fonts to be displayed under fontselect dropdown. Each item in the list should be specified in a form of: title=font-family and separated by semi-colon.

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
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'fontselect',
  font_formats: 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;AkrutiKndPadmini=Akpdmi-n'
});

fontsize_formats

This option allows you to override the font sizes displayed in the font size select box using a space or comma separated list of font sizes

Type: String

Default Value: '8pt 10pt 12pt 14pt 18pt 24pt 36pt'

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'fontsizeselect',
  fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt'
});

formats

This option enables you to override and add custom "formats" to the editor.

A format is the style that gets applied to text when you press, for example, the bold button inside the editor. TinyMCE is equipped with a text formatter engine that enables you to specify exactly what it should produce when the user clicks (in this example) the bold button.

Check out the custom formats example for a demonstration of this option.

Style merging

Similar elements and styles will be merged by default to reduce the output HTML size. So for example, if you select a word and select a font size and font face for it, it will merge these two styles into one span element instead of one span for each format type.

Built in formats

TinyMCE has some built in formats that you can override. These are:

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

Format parameters

For each format you can specify some additional parameters:

Name Summary
inline Tag name of the inline element to use as a wrapper, for example "span". Will be used to wrap the current selection.
block Tag name of the block element to use as a wrapper, for example "h1". Existing block elements within the selection will be replaced with this block element.
selector CSS3 selector pattern that will be 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.
classes Space separated list of classes that will be applied to the selected or newly created inline/block element.
styles Key/value object with CSS styles to apply to the selected or newly created inline/block element (e.g. color, backgroundColor, textDecoration, etc).
attributes Key/value object with attributes to apply to the selected or newly created inline/block element.
exact Makes sure that the format won't be merged with other wrappers having the same format. We use it to avoid conflicts between text-decorations for underline and strikethough formats.
wrapper States that the format is a container format for block elements. For example a div wrapper or blockquote.

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
// 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', classes : 'left'},
    aligncenter: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
    alignright: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
    alignjustify: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', 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 though the TinyMCE API. Here is a basic example of usage for the custom format defined above.

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

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

Variable substitution

You can use variables in your format definition these variables are then replaced with ones specified the specified in the call to the apply function. Here is an example how to use variables within formats.

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

It is possible to remove formats via the removeformat option.

Type: Array

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  removeformat: [
    {selector: 'b,strong,em,i,font,u,strike', remove : 'all', split : true, expand : false, block_expand: true, 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}
  ]
});

indentation

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

This defaults to 30px but can be any value.

Type: String

Default Value: 30px

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

style_formats

This option enables you to add more advanced style formats for text and other elements to the editor. The value of this option will be rendered as styles in the Formats dropdown.

The format of the option is very similar to the formats option, the only difference is the title name that is used for presentation in the drop list.

Type: Array

Example
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'}},
    {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
    {title: 'Example 1', inline: 'span', classes: 'example1'},
    {title: 'Example 2', inline: 'span', classes: 'example2'},
    {title: 'Table styles'},
    {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
  ]
});

Another example, this will add two options to the Formats dropdown, one for aligning an image left and adding a margin, one for putting it on the right side and setting a margin.

Type: Array

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  style_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'
      }
    }
  ]
});

A live demo of this option can be found in the custom formats example.

If you want to merge your styles to the default styles_format, you can use the style_formats_merge settings:

Type: Boolean

Default Value: false

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  style_formats_merge: true,
  style_formats: [
      // Your format as described on this page
  ]
});

The default is very similar to the following:

Type: Array

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  style_formats: [
    {title: 'Headers', items: [
      {title: 'Header 1', format: 'h1'},
      {title: 'Header 2', format: 'h2'},
      {title: 'Header 3', format: 'h3'},
      {title: 'Header 4', format: 'h4'},
      {title: 'Header 5', format: 'h5'},
      {title: 'Header 6', format: 'h6'}
    ]},
    {title: 'Inline', items: [
      {title: 'Bold', icon: 'bold', format: 'bold'},
      {title: 'Italic', icon: 'italic', format: 'italic'},
      {title: 'Underline', icon: 'underline', format: 'underline'},
      {title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
      {title: 'Superscript', icon: 'superscript', format: 'superscript'},
      {title: 'Subscript', icon: 'subscript', format: 'subscript'},
      {title: 'Code', icon: 'code', format: 'code'}
    ]},
    {title: 'Blocks', items: [
      {title: 'Paragraph', format: 'p'},
      {title: 'Blockquote', format: 'blockquote'},
      {title: 'Div', format: 'div'},
      {title: 'Pre', format: 'pre'}
    ]},
    {title: 'Alignment', items: [
      {title: 'Left', icon: 'alignleft', format: 'alignleft'},
      {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
      {title: 'Right', icon: 'alignright', format: 'alignright'},
      {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
    ]}
  ]
});

Hopefully we'll have an exact replica of the defaults soon.

style_formats_autohide

This option enables auto hiding of styles that doesn't match the current context. That means if you have a style for tables only it wouldn't be visible in the styles drop down when the caret isn't inside a table.

Type: Boolean Defaults: False

Example
tinymce.init({
  selector: 'textarea',
  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 the styles in the style_formats setting to the default style formats or completely replace them.

Type: Array

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

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.