Formatting functions in HTML field editors
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.
| Name | htmlArea icon | TinyMCE icon | Description |
|---|---|---|---|
| A11y Checker | Image omitted: a11y-checker.png TinyMCE Accessibility Checker | Allows you to check the HTML in the editor for various WCAG & Section 508 accessibility problems. `a11ychecker` | |
| Align Center | Image omitted: CenterTextAlignHTML.png Center text align html | Image omitted: TinyMCEV6-align-center\_icon.png TinyMCE v6 Align Center | Applies center alignment to the current paragraph. Code reference: `text-align:center` |
| Align Left | Image omitted: LeftTextAlignHTML.png Left text align html | Image omitted: TinyMCEV6-align-left\_icon.png TinyMCE v6 Align Left | Applies left alignment to the current paragraph. Code reference: `text-align:left` |
| Align Right | Image omitted: RightTextAlignHTML.png Right text align html | Image omitted: TinyMCEV6-align-right\_icon.png TinyMCE v6 Align Right | Applies right alignment to the current paragraph. Code reference: `text-align:right` |
| Background Color | Image omitted: BgColorHTML.png Background color html | Image omitted: TinyMCEV6-background-color\_icon.png 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 | Image omitted: ParaStylesHTML.png Paragraph styles html | Image omitted: ParaStylesHTML.png TinyMCE Block style | Applies the selected header or paragraph style to the current word or selected text. |
| \*Block quote | Image omitted: TinyMCEV6-blockquote\_icon.png TinyMCE v6 block-quotes | Applies block quote format to the current block level element. | |
| Bold | Image omitted: BoldHTML.png Bold html | Image omitted: TinyMCEV6-bold\_icon.png TinyMCE v6 Bold | Applies bold formatting to the selected text or current word. Keyboard shortcut: CTRL + B |
| Bullet List | Image omitted: BulletedHTML.png Bullet html | Image omitted: TinyMCEV6-bullet-list\_icon.png 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 | Image omitted: FontFamilyHTML.png Font Family html drop-down menu | Image omitted: TinyMCEV6-fontfamily\_icon.png TinyMCE v6 Font Family drop-down menu | Applies a font family to the selected text or current word. |
| Font Size | Image omitted: FontSizeHTML.png Font size html | Image omitted: TinyMCEV6-fontsize\_icon.png TinyMCE v6 Font Size drop-down menu | Applies a font size to the selected text or current word. |
| Format painter | Image omitted: format-painter.png TinyMCE Format Painter | Applies formatting choices, including font style, size, and table styles, between locations within the TinyMCE editable area. Supports various formats like inline and block styles. | |
| Increase Indent | Image omitted: IndentHTML.png Indent html | Image omitted: TinyMCEV6-increase-indent\_icon.png TinyMCE v6 Increase Indent | Applies indentation to the current or selected paragraphs, adding 30 px of left padding. Code reference: `padding-left` |
| Italic | Image omitted: ItalicHTML.png Italic html | Image omitted: TinyMCEV6-italic\_icon.png TinyMCE v6 Italic | Applies italic formatting to the selected text or current word. Keyboard shortcut: CTRL + I |
| Justify | Image omitted: FullTextAlignHTML.png Full text align html | Image omitted: TinyMCEV6-justify\_icon.png 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\) | Image omitted: TinyMCEV6-ltr\_icon.png TinyMCE v6 LTR | Sets the directionality of contents to from left to right. | |
| \*New document | Image omitted: TinyMCEV6-new-document\_icon.png TinyMCE v6 New Document | Creates a document without any formatting. | |
| Non-breaking | Image omitted: TinyMCEV6-nonbreaking\_icon.png TinyMCE v6 Non-breaking | Inserts a non-breaking space into the editor. | |
| Numbered List | Image omitted: NumberedHTML.png Numbered html | Image omitted: TinyMCEV6-numbered-list\_icon.png TinyMCE v6 Numbered List | Applies or removes ordered list tags for the selected paragraphs. Select the arrow to choose a different number type. |
| Outdent | Image omitted: DeIndentHTML.png Decrease Indent html | Image omitted: TinyMCEV6-outdent\_icon.png 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: |
| \*Page-break | Image omitted: TinyMCEV6-pagebreak\_icon.png TinyMCE v6 Page-break | Inserts a page-break into the editor. | |
| \*Remove format | Image omitted: TinyMCEV6-remove-formatting\_icon.png TinyMCE v6 Remove format | Removes the formatting from the selected text. | |
| \*RTL \(Right to Left\) | Image omitted: TinyMCEV6-rtl\_icon.png TinyMCE v6 RTL | Sets the directionality of contents to right to left. | |
| Strike through | Image omitted: TinyMCEV6-strikethrough\_icon.png TinyMCE v6 Strike through | Applies strikethough formatting to the selected text. | |
| \*Subscript | Image omitted: TinyMCEV6-subscript\_icon.png TinyMCE v6 Subscript | Applies subscript formatting to the selected text. | |
| \*Superscript | Image omitted: TinyMCEV6-superscript\_icon.png TinyMCE v6 Superscript | Applies superscript formatting to the selected text. | |
| Text Color | Image omitted: TextColorHTML.png Text color html | Image omitted: TinyMCEV6-text-color\_icon.png 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 | Image omitted: UlineHTML.png Underline html | Image omitted: TinyMCEV6-underline\_icon.png TinyMCE v6 Underline | Applies underline formatting to the selected text or current word. Keyboard shortcut: CTRL + U |