Rich text editor

@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	Default	Description
Initial Value	string	-	Initial value for the editor
Label	string	'Rich text editor'	Provide a title for your component
Placeholder	string	-	Placeholder string
Read only	boolean	false	If set to true, makes your component unavailable for users to interact with
Features	-	see below	One checkbox per group. Writes a complete on/off into Modules. Disabled if the JSON is a partial match
Modules	json	see below	Designer JSON. Checkbox changes merge into this blob. Not a public wrapper prop
Use semantic HTML	boolean	true	If true, stores Quill semantic HTML instead of the editor DOM HTML

The public wrapper API is features. Each flag fully enables or disables format, toolbar, and module for that group. formats and modules are not public props. Omitted keys keep their defaults.

<RichTextEditor
  features={{
    image: true,
    video: false,
    formula: false,
    link: false,
    undoRedo: true,
    keyboardShortcuts: false,
  }}
  onChange={value => console.log(value)}
/>

In the designer, toggling a checkbox merges that one group into the Modules JSON and leaves other keys and toolbar items unchanged. If the JSON only partially matches a group, that checkbox is disabled.

video: false means no video format, no video toolbar button, and no video embed.

Group	Default	Controls
inlineFormatting	on	Bold, italic, underline, strike, color, background, superscript, subscript
blocks	on	Headings, blockquote, code block, lists, indent, align
image	on	Image embed
video	off	Video embed
formula	off	Formula. Requires KaTeX on the page
link	off	Hyperlink
undoRedo	on	Undo and redo
keyboardShortcuts	off	Keyboard shortcuts for bold, italic, and underline

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