Rich text editors enable users to input and edit rich text. This component uses the Froala editor.

Applications

UIRichTextEditor is used exclusively in features that allow for users to edit rich text content, such as in comments or descriptions.

Alternatives

For multi-line text input that does not require rich text formatting, use UITextArea.

‍

1. Formatting Tools

The Froala text & content formatting tools are displayed in a toolbar at the top of the text edit area.

2. Text Edit Area

The text input area is the interactive area that allows a user to enter text, as well as other content, such as images.

3. Header (often)

Rich text editors are usually paired with a UIHeader. The header contains the actions to edit and save the rich text content, and provides a label for the section.

Size

The height of the rich text editor is flexible to fit the content. The width of the rich text editor is determined by its placement in the page layout (see “Page & Component Layout” guidelines)

‍

Rich text editors are directly interactive sections that include formatting tools (provided by Froala) and a live preview of the content being created/formatted.

Edit vs. View

When active, the rich text formatting tools are visible at the top of the editable text space. When viewing only (not editing), the formatting tools are hidden, and the rich text is displayed within an ordinary UITextBlock.

‍