Formatting icons for the HTML field editors

  • Release version: Washingtondc
  • Updated February 1, 2024
  • 1 minute to read

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

    The following table displays icons that are available in the TinyMCE and the htmlArea editors. Names marked with an asterisk (*) are not available with the htmlArea editor.

    Table 1. Formatting table
    htmlArea icon TinyMCE icon Name Description

    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

    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

    Tiny MCE v4 justify

    		 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.

    Decrease Indent html

    Tiny MCE v4 outdent

    		 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

    Tiny MCE v4 indent

    		 Increase Indent

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

    Code reference: padding-left

    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.