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 pageblock_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
});
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
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.