Contents Now Platform Administration Previous Topic Next Topic Formatting in the TinyMCE editor Subscribe Log in to subscribe to topics and get notified when content changes. ... SAVE AS PDF Selected Topic Topic & Subtopics All Topics in Contents Share 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 Document* Clears the contents of the HTML field. Bold Applies bold formatting to the selected text or current word. Keyboard shortcut: CTRL + B Italic Applies italics formatting to the selected text or current word. Keyboard shortcut: CTRL + I Underline Applies underline formatting to the selected text or current word. Keyboard shortcut: CTRL + U Strikethrough* Applies strikethrough formatting to the selected text or current word. Align Right Applies right alignment to the current paragraph. Code reference: text-align:right Align Center Applies center alignment to the current paragraph. Code reference: text-align:center Align Left Applies left alignment to the current paragraph. Code reference: text-align:left Justify Applies justified alignment, which stretches the lines to equal width, to the current paragraph. Code reference: text-align:justify Format Applies a paragraph style to the current paragraph, such as Paragraph, Heading 1, and Preformatted. Font Family Applies a font family to the selected text or current word. Font Size Applies a font size to the selected text or current word. 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. 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. 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 Increase Indent Applies indentation to the current or selected paragraphs (adds 30px of left padding). Code reference: padding-left 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> 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. 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. Clear Formatting* Removes the inline styles and formatting from the selected text. Subscript* Applies subscript text, which appears half a character below the baseline, to the current word or selected text. Code reference: <sub> Superscript* Applies superscript text, which appears half a character above the baseline, to the current word or selected text. Code reference: <sup> Related tasksConfigure the TinyMCE HTML toolbarConfigure the legacy HTML toolbarRelated referenceExtended HTML editor functions On this page Send Feedback Previous Topic Next Topic
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 Document* Clears the contents of the HTML field. Bold Applies bold formatting to the selected text or current word. Keyboard shortcut: CTRL + B Italic Applies italics formatting to the selected text or current word. Keyboard shortcut: CTRL + I Underline Applies underline formatting to the selected text or current word. Keyboard shortcut: CTRL + U Strikethrough* Applies strikethrough formatting to the selected text or current word. Align Right Applies right alignment to the current paragraph. Code reference: text-align:right Align Center Applies center alignment to the current paragraph. Code reference: text-align:center Align Left Applies left alignment to the current paragraph. Code reference: text-align:left Justify Applies justified alignment, which stretches the lines to equal width, to the current paragraph. Code reference: text-align:justify Format Applies a paragraph style to the current paragraph, such as Paragraph, Heading 1, and Preformatted. Font Family Applies a font family to the selected text or current word. Font Size Applies a font size to the selected text or current word. 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. 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. 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 Increase Indent Applies indentation to the current or selected paragraphs (adds 30px of left padding). Code reference: padding-left 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> 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. 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. Clear Formatting* Removes the inline styles and formatting from the selected text. Subscript* Applies subscript text, which appears half a character below the baseline, to the current word or selected text. Code reference: <sub> Superscript* Applies superscript text, which appears half a character above the baseline, to the current word or selected text. Code reference: <sup> Related tasksConfigure the TinyMCE HTML toolbarConfigure the legacy HTML toolbarRelated referenceExtended HTML editor functions
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 Document* Clears the contents of the HTML field. Bold Applies bold formatting to the selected text or current word. Keyboard shortcut: CTRL + B Italic Applies italics formatting to the selected text or current word. Keyboard shortcut: CTRL + I Underline Applies underline formatting to the selected text or current word. Keyboard shortcut: CTRL + U Strikethrough* Applies strikethrough formatting to the selected text or current word. Align Right Applies right alignment to the current paragraph. Code reference: text-align:right Align Center Applies center alignment to the current paragraph. Code reference: text-align:center Align Left Applies left alignment to the current paragraph. Code reference: text-align:left Justify Applies justified alignment, which stretches the lines to equal width, to the current paragraph. Code reference: text-align:justify Format Applies a paragraph style to the current paragraph, such as Paragraph, Heading 1, and Preformatted. Font Family Applies a font family to the selected text or current word. Font Size Applies a font size to the selected text or current word. 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. 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. 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 Increase Indent Applies indentation to the current or selected paragraphs (adds 30px of left padding). Code reference: padding-left 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> 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. 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. Clear Formatting* Removes the inline styles and formatting from the selected text. Subscript* Applies subscript text, which appears half a character below the baseline, to the current word or selected text. Code reference: <sub> Superscript* Applies superscript text, which appears half a character above the baseline, to the current word or selected text. Code reference: <sup> Related tasksConfigure the TinyMCE HTML toolbarConfigure the legacy HTML toolbarRelated referenceExtended HTML editor functions
