Rich text editor

Alpha feature

Alpha features are subject to change. If a change is made, some properties may be lost. The behavior of an alpha feature may change when Appfarm Create is updated, but it will not crash your solution.

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 be always 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

To display content stored in a Rich Text property you must use the Rich Text Editor component. Set the Read Only property to true to prevent the user from editing the text.

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.