Rich text editor

The Rich Text Editor is a lightweight text editing component for entering and styling text. To store and read rich text, the value property of the component must be bound to a data source property of data type Rich Text.

Usage

Examples

A working example of the Rich Text Editor is available in our Showroom. You can view the demo, as well as access the setup in Appfarm Create. Don't have access? Register.

Component styling

The Rich Text Editor is unstyled. To visually highlight the editor in your app, it can be a good idea to wrap the editor component in a container which is sized and positioned within your UI. You can set the editor component to fill the wrapping container. A contrasting background color on the container can also help.

Content styling

By enabling the Show Toolbar property you can provide the user with the ability to style the content. The following options are available and each one can be disabled:

• Bold

• Italic

• Underline

• Code

• H1

• H2

• H3

• H4

• H5

• H6

• Block quote

• Numbered list

• Bullet list

• Link

• Table

Note that links will always be formatted in blue with an underline. Lists and tables have default styling that cannot be changed.

To differentiate text in the editor from text elsewhere in your app you can override the typography properties in the Styles tab of the Component Properties.

Output

Content stored in a Rich Text property can be displayed in three different ways:

• Using the Rich text component

• Using a Text component and formatting the Rich Text to Plain Text or Markdown using Value processor

• Using the Rich Text Editor component, with the Read Only property set to true

Properties

Value

Select a data binding to store/access the rich text content.

Placeholder

Enter placeholder text to be displayed in the rich text editor when no content is stored.

Auto Focus

Select to focus the cursor in the rich text editor when it is rendered.

Show Toolbar

Configure a boolean value to show/hide the formatting toolbar.

Toolbar Content

Visible when Show Toolbar is selected.

Select which formatting options should be visible in the formatting toolbar.

Inset Edit

Select to enable horizontal padding for the text input. This is recommended if you have added a border to a wrapping container.