Formatting in the TinyMCE editor

The formatting table displays how to control the way text appears.

In the following table, the TinyMCE v3/htmlArea icon column displays icons that are available with the TinyMCE version 3 and htmlArea editors. The TinyMCE v4 icon column displays icons that are available with the TinyMCE version 4 editor. Names marked with an asterisk (*) are not available with the htmlArea editor.

Table 1. Formatting table
TinyMCE v3/htmlArea icon TinyMCE v4 icon Name Description
New doc html
New Document* Clears the contents of the HTML field.
Bold html
TinyMCE v4 bold
Bold

Applies bold formatting to the selected text or current word.

Keyboard shortcut: CTRL + B

Italic html
TinyMCE v4 italic
Italic

Applies italics formatting to the selected text or current word.

Keyboard shortcut: CTRL + I

Uline html
TinyMCE v4 underline
Underline

Applies underline formatting to the selected text or current word.

Keyboard shortcut: CTRL + U

Strike html
Strikethrough* Applies strikethrough formatting to the selected text or current word.
Right text align html
TinyMCE v4 align right
Align Right

Applies right alignment to the current paragraph.

Code reference: text-align:right

Center text align html
TinyMCE v4 align center
Align Center

Applies center alignment to the current paragraph.

Code reference: text-align:center

Left text align html
TinyMCE v4 align left
Align Left

Applies left alignment to the current paragraph.

Code reference: text-align:left

Full text align html
Justify

Applies justified alignment, which stretches the lines to equal width, to the current paragraph.

Code reference: text-align:justify

Para styles html
Format Applies a paragraph style to the current paragraph, such as Paragraph, Heading 1, and Preformatted.
Font family html
TinyMCE v4 fonts
Font Family Applies a font family to the selected text or current word.
Font size html
TinyMCE v4 font size
Font Size Applies a font size to the selected text or current word.
Bulleted html
TinyMCE v4 bullets
Insert/Remove Bulleted List Applies or removes unordered list tags for the selected paragraphs. Click the arrow beside the button to select a different bullet type.
Numbered html
Tiny MCE v4 numbers
Insert/Remove Numbered List Applies or removes ordered list tags for the selected paragraphs. Click the arrow beside the button to select a different number type.
De Indent html
Decrease Indent

Removes indentation from the current or selected paragraphs (removes 30px of left padding; padding cannot be less than 0).

Code reference: padding-left

Indent html
Increase Indent

Applies indentation to the current or selected paragraphs (adds 30px of left padding).

Code reference: padding-left

Block quote html
Block Quote*

Applies the <blockquote> tag, which defines a long quotation, to the current or selected paragraphs. Browsers usually indent these elements.

Code reference: <blockquote>

Text color html
Text color html
Select Text Color Applies font color to the current word or selected text. Click the button to use the current color, or click the arrow next to the button to view more colors. Click More Colors... to view various color options and the hexadecimal codes.
Bg color html
TinyMCE v4 background color
Select Background Color Applies background color to the current word or selected text. Click the button to use the current color, or click the arrow next to the button to view more colors. Click More Colors... to view various color options and the hexadecimal codes.
Remove format html
Clear Formatting* Removes the inline styles and formatting from the selected text.
Subscript html
Subscript*

Applies subscript text, which appears half a character below the baseline, to the current word or selected text.

Code reference: <sub>

Superscript html
Superscript*

Applies superscript text, which appears half a character above the baseline, to the current word or selected text.

Code reference: <sup>