Rich Text Editor

Rich Text Editor is an input field for entering rich text.

Note	Commercial feature A commercial Vaadin subscription is required to use Rich Text Editor in your project. Start Free Trial See Pricing

The Rich Text Editor allows you to format and style your text using boldface, italics, headings, lists, images, links, etc.

const richTextDelta = '[{"insert":"Type something here and format it "},{"attributes":{"underline":true},"insert":"as you want"},{"insert":".\n"}]';

return <RichTextEditor style={{ maxHeight: "400px" }} value={richTextDelta} />;

Value Format

Rich Text Editor supports the HTML format and the Quill Delta format for reading and setting its value.

To read or write a value in the Delta format, use the value property. To read or write a value in the HTML format, use the htmlValue property and the dangerouslySetHtmlValue method.

Note	Sanitize HTML To prevent injecting malicious content, be sure to sanitize HTML strings before passing them to the web component using `dangerouslySetHtmlValue`. An example of this would be using a library such as dompurify.

Read-Only

Setting the component to read-only hides the toolbar and makes the content non-editable.

<RichTextEditor
  style={{ maxHeight: "400px" }}
  readonly
  value={richTextDelta}
/>

Automatic Height Changes

Unless set to a fixed height, Rich Text Area adjusts its height automatically based on its content.

Minimum & Maximum Height

The automatic resizing can be restricted to a minimum and maximum height.

<RichTextEditor
  style={{ minHeight: "200px", maxHeight: "400px" }}
  value={richTextDelta}
/>

Theme Variants

Compact

Apply the compact theme to make the toolbar more compact.

<RichTextEditor
  style={{ maxHeight: "400px" }}
  theme="compact"
  value={richTextDelta}
/>

No Border

Apply the no-border theme variant to remove Rich Text Editor’s border. An example of this is when the component is wrapped in a container with its own borders.

<RichTextEditor
  style={{ maxHeight: "400px" }}
  theme="no-border"
  value={richTextDelta}
/>

Important

You can find more information in the corresponding article on vaadin.com.

Docs