Formatting functions in HTML field editors

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 minutes 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 (*) aren’t available with the htmlArea editor.

    Table 1. Formatting table
    Name htmlArea icon TinyMCE icon Description
    A11y Checker Allows you to check the HTML in the editor for various WCAG & Section 508 accessibility problems. a11ychecker
    Align Center

    Center text align html

    TinyMCE v6 Align Center

    Applies center alignment to the current paragraph.

    Code reference: text-align:center

    Align Left

    Left text align html

    TinyMCE v6 Align Left

    Applies left alignment to the current paragraph.

    Code reference: text-align:left

    Align Right

    Right text align html

    TinyMCE v6 Align Right

    Applies right alignment to the current paragraph.

    Code reference: text-align:right

    Background Color

    Background color html

    TinyMCE v6 Background Color

    Applies background color to the current word or selected text. Select the button to use the current color. Select More Colors... to view various color options and the hexadecimal codes.
    Blocks

    Paragraph styles html

    TinyMCE v6 Blocks

    Toggles the visibility of block level elements in the editable area. It’s similar to WYSIWYG hidden character functionality, but at block level.
    *Block quote

    TinyMCE v6 block-quotes

    Applies block quote format to the current block level element.
    Bold

    Bold html

    TinyMCE v6 Bold

    Applies bold formatting to the selected text or current word.

    Keyboard shortcut: CTRL + B

    Bullet List

    Bullet html

    TinyMCE v6 Bullet List

    Applies or removes unordered list tags for the selected paragraphs. Select the arrow to choose a different bullet type.
    Font Family

    Font Family html drop-down menu

    TinyMCE v6 Font Family drop-down menu

    Applies a font family to the selected text or current word.
    Font Size

    Font size html

    TinyMCE v6 Font Size drop-down menu

    Applies a font size to the selected text or current word.
    Increase Indent

    Indent html

    TinyMCE v6 Increase Indent

    Applies indentation to the current or selected paragraphs, adding 30 px of left padding.

    Code reference: padding-left

    Italic

    Italic html

    TinyMCE v6 Italic

    Applies italic formatting to the selected text or current word.

    Keyboard shortcut: CTRL + I

    Justify

    Full text align html

    TinyMCE v6 Justify

    Applies justified alignment, which stretches the lines to be equal widths, to the selected paragraph.

    Code reference: text-align:justify

    *LTR (Left to Right)

    TinyMCE v6 LTR

    Sets the directionality of contents to from left to right.
    *New document

    TinyMCE v6 New Document

    Creates a document without any formatting.
    Non-breaking

    TinyMCE v6 Non-breaking

    Inserts a non-breaking space into the editor.
    Numbered List

    Numbered html

    TinyMCE v6 Numbered List

    Applies or removes ordered list tags for the selected paragraphs. Select the arrow to choose a different number type.
    Outdent

    Decrease Indent html

    TinyMCE v6 Outdent

    Removes indentation from the current or selected paragraphs, removing 30 px of left padding.

    Note:
    Padding can’t be less than 0.

    Code reference: padding-left

    *Page-break

    TinyMCE v6 Page-break

    Inserts a page-break into the editor.
    *Remove format

    TinyMCE v6 Remove format

    Removes the formatting from the selected text.
    *RTL (Right to Left)

    TinyMCE v6 RTL

    Sets the directionality of contents to right to left.
    Strike through

    TinyMCE v6 Strike through

    Applies strikethough formatting to the selected text.
    *Subscript

    TinyMCE v6 Subscript

    Applies subscript formatting to the selected text.
    *Superscript

    TinyMCE v6 Superscript

    Applies superscript formatting to the selected text.
    Text Color

    Text color html

    TinyMCE v6 Text Color

    Applies text color to the selected text. Select the button to use the current color. Select More Colors... to view various color options and the hexadecimal codes.
    Underline

    Underline html

    TinyMCE v6 Underline

    Applies underline formatting to the selected text or current word.

    Keyboard shortcut: CTRL + U