Important changes to Tiny Cloud pricing > Find out more

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

The format option enables you to override and add custom formats to the editor.

A format is a style that gets applied to text when you press, for example, the bold button inside the editor. TinyMCE is equipped with a text formatting engine that enables you to precisely specify 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 are 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 merges 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:

  • alignleft
  • aligncenter
  • alignright
  • alignjustify
  • bold
  • italic
  • underline
  • strikethrough
  • forecolor
  • hilitecolor
  • fontname
  • fontsize
  • blockquote
  • removeformat
  • p
  • h1, h2, h3, h4, h5, h6
  • div
  • address
  • pre
  • div
  • code
  • dt, dd
  • samp

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" is 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 are replaced with this block element.
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.
classes Space-separated list of classes that are 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 is not merged with other wrappers having the same format. We use it to avoid conflicts between text-decorations for underline and strikethrough 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 through 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 the ones specified in the call to the apply function. Here is an example of 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

Use the removeformat option to remove formats.

Type: Array

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

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

indent_use_margin

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

Type: boolean

Default Value: false

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

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 styleselect dropdown toolbar item.

It's important to note that the style_formats option, while similar in syntax, is entirely separate from the formats option. This option will only add items to the Formats dropdown in the toolbar, not the Format dropdown in the menu bar.

Type: Array

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar: "styleselect",
  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
  toolbar: "styleselect",
  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
  toolbar: "styleselect",
  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
  toolbar: "styleselect",
  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: Boolean
Defaults: False

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.