Rich Text Editor
Note
|
Commercial feature
A commercial Vaadin subscription is required to use Rich Text Editor in your project. |
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}
/>
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. |