Rich text editor - FormEngine

Package: @react-form-builder/components-rich-text

Introduction

RichTextEditor is a thin wrapper around the rich text editor Quill. This component is in a separate package @react-form-builder/components-rich-text.

Main properties

The following general properties are available within the Main tab:

Name	Type	Description
Initial Value	`string`	Initial value for the editor
Label	`string`	Provide a title for your component
Placeholder	`string`	Placeholder string
Read only	`string`	If set to true, makes your component unavailable for users to interact with
Toolbar options	`choice`	Groups of buttons to display on the toolbar. The order in which the values are selected determines the order of the buttons
Modules	`json`	Allows to customize the behavior and functionality of the editor. Read docs for more info.

Example of a value for Modules property:

{
  "toolbar": [
    [{ "header": [1, 2, 3, 4, 5, 6, false] }],
    ["bold", "italic", "underline", "strike"],
    [{ "list": "ordered" }, { "list": "bullet" }],
    [{ "script": "sub" }, { "script": "super" }],
    [{ "indent": "-1" }, { "indent": "+1" }],
    [{ "direction": "rtl" }],
    [{ "size": ["small", false, "large", "huge"] }],
    [{ "color": [] }, { "background": [] }],
    [{ "font": [] }],
    [{ "align": [] }],
    ["link", "image", "video"],
    ["clean"]
  ]
}

At the bottom of the Main properties menu, you can find additional options:

Render When: Provides conditional rendering for your component as described in the corresponding chapter.
HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

For Device: You can provide component’s style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.
Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

Name	Type	Description
Width	`number`	Specifies the width for your component
Height	`number`	Specifies the height for your component
Margin top/right/bottom/left	`number`	Margin values for you component
Color	`string`	Allows customizing the text color
Background color	`string`	Enables customizing the background color

​Introduction

​Main properties

​Style properties

Introduction

Main properties

Style properties