Docs

Docs

Rich Text Editor

Rich Text Editor allows the user to author text that has rich formatting.
Note
Commercial feature

A commercial Vaadin subscription is required to use Rich Text Editor in your project.

Rich Text Editor allows the user to author text that has rich formatting. It allows you to format and style your text using boldface, italics, headings, lists, images, links, etc.

Open in a
new tab
<RichTextEditor
  style={{ maxHeight: '400px' }}
  value={richText}
  onValueChanged={(event) => setRichText(event.detail.value)}
/>

Value Format

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

HTML format details

Rich Text Editor supports values in the HTML format, with the following restrictions:

  • Only a subset of HTML tags are supported, which are listed in the table below.

  • Block elements, such as paragraphs, lists, or block quotes, can’t be nested.

  • Unsupported tags, such as <b>, are replaced with an equivalent supported tag, such as <strong>, or with a paragraph (<p>).

Table 1. Supported HTML tags
Feature Tags

Paragraphs and line breaks

<p>, <br>

Headings

<h1>, <h2>, …​, <h6>

Bold, italic, underlined and strike-through text

<strong>, <em>, <u>, <strikethrough>

Links

<a href="…​">…​</a>

Text alignment via the text-align CSS property

<p style="text-align: center">

Ordered, unordered lists, and list items
(can’t be nested)

<ol>, <ul>, <li>

Block quotes

<blockquote>

Pre-formatted text

<pre>

Images, using either a web URL or a Base64-encoded data URL

<img src="…​">

The following snippet contains an HTML document that is supported by the component, and demonstrates the usage of several tags. Try pasting the snippet into the HTML Value text area in the example below and see how the editor updates. Then try modifying the value, either by using the editor’s features, or by changing the HTML value directly.

<h2>High quality rich text editor for the web</h2>
<p>Rich text editor handles the following formatting:</p>
<ul>
  <li><strong>Bold</strong></li>
  <li><em>Italic</em></li>
  <li><u>Underline</u></li>
  <li><s>Strike-through</s></li>
</ul><h3>Blockquotes</h3>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua.
</blockquote><h3>Code blocks</h3>
<pre spellcheck='false'>&lt;body&gt;
  &lt;vaadin-rich-text-editor&gt;&lt;/vaadin-rich-text-editor&gt;
&lt;/body&gt;
</pre>
Delta format details

The JSON-based Delta format consists of an array of operations to apply to a document. Rich Text Editor specifically only uses insert operations, each operation sequentially adding content to the document. Operations can have attributes, such as whether to render a piece of content with a specific text style, or as a link. For the full specification of the format, see the Quill Delta GitHub repository.

The following snippet contains a Delta document that demonstrates some of the format’s features. Try pasting the snippet into the Delta Value text area in the example below and see how the editor updates. Then try modifying the value, either by using the editor’s features, or by changing the Delta value directly.

[
  {"insert": "High quality rich text editor for the web\n", "attributes": {"header":  2}},
  {"insert": "Rich text editor handles the following formatting:\n"},
  {"insert": "Bold\n","attributes": { "bold": true, "list": "bullet" }},
  {"insert": "Italic\n", "attributes": { "italic": true, "list": "bullet" }},
  {"insert": "Underline\n", "attributes": { "underline": true, "list": "bullet" }},
  {"insert": "Strike-through\n", "attributes": { "strike": true, "list": "bullet" }},
  {"insert": "Blockquotes\n", "attributes": { "header": 3 }},
  {"insert": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n", "attributes": { "blockquote": true }},
  {"insert": "Code blocks\n", "attributes": { "header": 3 }},
  {"insert": "<vaadin-rich-text-editor></vaadin-rich-text-editor>\n", "attributes": { "code-block": true }}
]

For the Flow component, the default is the HTML format, which is also used automatically when binding the component with Binder.

To read, write, or bind the component’s value using the Delta format, use the RichTextEditor.asDelta() wrapper.

For the web component, to read or write the value in the Delta format, use the value property.

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

Note
HTML sanitization
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.
Open in a
new tab
const [htmlValue, setHtmlValue] = useState('');
const [deltaValue, setDeltaValue] = useState('');

const richTextEditorRef = useRef<RichTextEditorElement>(null);

const handleEditorChange = (event: RichTextEditorValueChangedEvent) => {
  setDeltaValue(event.detail.value);
};

const handleHtmlChange = (event: TextAreaChangeEvent) => {
  const value = event.target.value;
  setHtmlValue(value);
  if (richTextEditorRef.current) {
    richTextEditorRef.current.dangerouslySetHtmlValue(value);
  }
};

return (
  <>
    <RichTextEditor
      style={{ height: '400px' }}
      value={deltaValue}
      onValueChanged={handleEditorChange}
      onHtmlValueChanged={(e) => setHtmlValue(e.detail.value)}
      ref={richTextEditorRef}
    />

    <TextArea
      label="HTML Value"
      helperText="Shows the HTML representation of the edited document. You can also modify or paste HTML here to see the changes reflected in the editor above. Note that you have to leave (blur) this field in order for the editor to update."
      style={{ width: '100%' }}
      value={htmlValue}
      onChange={handleHtmlChange}
    />

    <TextArea
      label="Delta Value"
      helperText="Shows the Delta representation of the edited document. You can also modify or paste the Delta JSON here to see the changes reflected in the editor above. Note that you have to leave (blur) this field in order for the editor to update."
      style={{ width: '100%' }}
      value={deltaValue}
      onChange={(e) => setDeltaValue(e.target.value)}
    />
  </>
);

Read-Only

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

Open in a
new tab
<RichTextEditor style={{ height: '400px' }} readonly value={templates.richTextDelta} />

Automatic Height Adjustment

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

Minimum and Maximum Height

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

Open in a
new tab
<RichTextEditor
  style={{ minHeight: '200px', maxHeight: '400px' }}
  value={richText}
  onValueChanged={(event) => setRichText(event.detail.value)}
/>

Theme Variants

Compact

Apply the compact theme to make the toolbar more compact.

Open in a
new tab
<RichTextEditor style={{ height: '400px' }} theme="compact" value={richText} />

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.

Open in a
new tab
<RichTextEditor
  style={{ height: '400px' }}
  theme="no-border"
  value={richText}
  onValueChanged={(event) => setRichText(event.detail.value)}
/>

Toolbar Actions

History

Button Title Description

Undo

Reverses the previous action.

Redo

Restores actions undone by Undo.

Emphasis

Button Title Description

B

Bold

Boldens text.

I

Italic

Italicizes text.

U

Underline

Underlines text.

T

Strikethrough

Strikes through text.

Headings

Three different headings are available in Rich Text Editor: H1, H2, and H3. Use them to signify structure, as well as importance.

Button Title Description

H1

H1

Heading level 1.

H2

H2

Heading level 2.

H3

H3

Heading level 3.

Subscript and Superscript

Button Title Description

X

Subscript

Subscript text is positioned below the normal baseline and with a smaller font size.

X

Superscript

Superscript text is positioned above the normal baseline and a with smaller font size.

List

Button Title Description

Ordered list

  1. Creates a numbered list.

Unordered list

  • Creates a bulleted list.

Alignment

Button Title Description

Left align

Left-aligns text (default).

Center align

Center-aligns text.

Right align

Right-aligns text.
Button Title Description

Image

Uploads and inserts an image from your device.

Link

Creates a hyperlink.

Blocks

Button Title Description

”

Block quote

Creates a section quoted from another source.

<>

Code block

Creates a block formatted as code.

Clear

Button Title Description

Clear formatting

Removes all formatting of the selected text.
Component Usage recommendations

Text Field

Basic single-line text input.

Text Area

Basic multi-line text input.