Rich Text Editor

Value Format
Read-Only
Automatic Height Adjustment
Theme Variants
Toolbar Actions
Related Components

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

Rich Text Editor is an input field for entering rich text. It allows you to format and style your text using boldface, italics, headings, lists, images, links, etc.

Open in a
new tab

Source code

rich-text-editor-basic.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/rich-text-editor';

import templates from '../../../../src/main/resources/data/templates.json';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('rich-text-editor-basic')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private richText = templates.richTextDelta;

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-rich-text-editor
        style="max-height: 400px"
        value="${this.richText}"
      ></vaadin-rich-text-editor>
      <!-- end::snippet[] -->
    `;
  }
}
RichTextEditorBasic.javapackage com.vaadin.demo.component.richtexteditor;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.richtexteditor.RichTextEditor;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;

@Route("rich-text-editor-basic")
public class RichTextEditorBasic extends Div {

    public RichTextEditorBasic() {
        // tag::snippet[]
        RichTextEditor rte = new RichTextEditor();
        rte.setMaxHeight("400px");
        String valueAsDelta = DataService.getTemplates().getRichTextDelta();
        rte.asDelta().setValue(valueAsDelta);
        add(rte);
        // end::snippet[]
    }

}

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.

Source code

HTML<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.

Source code

JSON[
  {"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, to read, write, or bind the component’s value with Binder, use:

RichTextEditor.asDelta() for the Delta format
RichTextEditor.asHtml() for the HTML format

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

Source code

rich-text-editor-set-get-value.ts
import { html, LitElement } from 'lit';
import { customElement, query, state } from 'lit/decorators.js';
import '@vaadin/rich-text-editor';
import type {
  RichTextEditor,
  RichTextEditorHtmlValueChangedEvent,
  RichTextEditorValueChangedEvent,
} from '@vaadin/rich-text-editor';
import '@vaadin/text-area';
import type { TextAreaChangeEvent } from '@vaadin/text-area';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('rich-text-editor-set-get-value')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private htmlValue = '';

  @state()
  private deltaValue = '';

  @query('vaadin-rich-text-editor')
  private richTextEditor!: RichTextEditor;

  protected override render() {
    return html`
      <!-- tag::htmlsnippet[] -->
      <vaadin-rich-text-editor
        style="height: 400px;"
        .value="${this.deltaValue}"
        @value-changed="${(event: RichTextEditorValueChangedEvent) => {
          this.deltaValue = event.detail.value;
        }}"
        @html-value-changed="${(event: RichTextEditorHtmlValueChangedEvent) => {
          this.htmlValue = event.detail.value;
        }}"
      ></vaadin-rich-text-editor>

      <vaadin-text-area
        label="HTML Value"
        helper-text="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="${this.htmlValue}"
        @change="${(e: TextAreaChangeEvent) => this.setHtmlValue(e.target.value)}"
      ></vaadin-text-area>

      <vaadin-text-area
        label="Delta Value"
        helper-text="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="${this.deltaValue}"
        @change="${(e: TextAreaChangeEvent) => {
          this.deltaValue = e.target.value;
        }}"
      ></vaadin-text-area>
      <!-- end::htmlsnippet[] -->
    `;
  }

  setHtmlValue(htmlValue: string) {
    this.htmlValue = htmlValue;
    this.richTextEditor.dangerouslySetHtmlValue(htmlValue);
  }

}
RichTextEditorSetGetValue.javapackage com.vaadin.demo.component.richtexteditor;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.richtexteditor.RichTextEditor;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;

import java.util.Objects;

@Route("rich-text-editor-set-get-value")
public class RichTextEditorSetGetValue extends Div {

    public RichTextEditorSetGetValue() {
        // tag::snippet[]
        RichTextEditor rte = new RichTextEditor();
        rte.getStyle().set("max-height", "400px");
        rte.setValueChangeMode(ValueChangeMode.TIMEOUT);

        // HTML value
        TextArea htmlTextArea = new TextArea("HTML Value");
        htmlTextArea.setHelperText(
                "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.");
        htmlTextArea.setWidthFull();
        rte.asHtml().addValueChangeListener(e -> htmlTextArea
                .setValue(e.getValue() == null ? "" : e.getValue()));
        htmlTextArea.addValueChangeListener(e -> {
            if (!Objects.equals(rte.asHtml().getValue(), e.getValue())) {
                rte.asHtml().setValue(e.getValue());
            }
        });

        // Delta value
        TextArea deltaTextArea = new TextArea("Delta Value");
        deltaTextArea.setHelperText(
                "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.");
        deltaTextArea.setWidthFull();
        rte.asDelta().addValueChangeListener(
                e -> deltaTextArea.setValue(e.getValue()));
        deltaTextArea.addValueChangeListener(e -> {
            if (!rte.asDelta().getValue().equals(e.getValue())) {
                rte.asDelta().setValue(e.getValue());
            }
        });

        add(rte, htmlTextArea, deltaTextArea);
        // end::snippet[]
    }

}

Read-Only

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

Open in a
new tab

Source code

rich-text-editor-readonly.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/rich-text-editor';

import templates from '../../../../src/main/resources/data/templates.json';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('rich-text-editor-readonly')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private richText = templates.richTextDelta;

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-rich-text-editor
        style="height: 400px;"
        readonly
        .value="${this.richText}"
      ></vaadin-rich-text-editor>
      <!-- end::snippet[] -->
    `;
  }
}
RichTextEditorReadonly.javapackage com.vaadin.demo.component.richtexteditor;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.richtexteditor.RichTextEditor;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;

@Route("rich-text-editor-readonly")
public class RichTextEditorReadonly extends Div {

    public RichTextEditorReadonly() {
        // tag::snippet[]
        RichTextEditor rte = new RichTextEditor();
        rte.setMaxHeight("400px");
        String valueAsDelta = DataService.getTemplates().getRichTextDelta();
        rte.asDelta().setValue(valueAsDelta);
        rte.setReadOnly(true);
        add(rte);
        // end::snippet[]
    }

}

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

Source code

rich-text-editor-min-max-height.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/rich-text-editor';

import templates from '../../../../src/main/resources/data/templates.json';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('rich-text-editor-min-max-height')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private richText = templates.richTextDelta;

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-rich-text-editor
        style="min-height:200px; max-height: 400px;"
        .value="${this.richText}"
      ></vaadin-rich-text-editor>
      <!-- end::snippet[] -->
    `;
  }
}
RichTextEditorMinMaxHeight.javapackage com.vaadin.demo.component.richtexteditor;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.richtexteditor.RichTextEditor;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;

@Route("rich-text-editor-min-max-height")
public class RichTextEditorMinMaxHeight extends Div {

    public RichTextEditorMinMaxHeight() {
        // tag::snippet[]
        RichTextEditor rte = new RichTextEditor();
        rte.setMaxHeight("400px");
        rte.setMinHeight("200px");
        String valueAsDelta = DataService.getTemplates().getRichTextDelta();
        rte.asDelta().setValue(valueAsDelta);
        add(rte);
        // end::snippet[]
    }

}

Theme Variants

Compact

Apply the compact theme to make the toolbar more compact.

Open in a
new tab

Source code

rich-text-editor-theme-compact.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/rich-text-editor';

import templates from '../../../../src/main/resources/data/templates.json';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('rich-text-editor-theme-compact')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private richText = templates.richTextDelta;

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-rich-text-editor
        style="height: 400px;"
        theme="compact"
        .value="${this.richText}"
      ></vaadin-rich-text-editor>
      <!-- end::snippet[] -->
    `;
  }
}
RichTextEditorThemeCompact.javapackage com.vaadin.demo.component.richtexteditor;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.richtexteditor.RichTextEditor;
import com.vaadin.flow.component.richtexteditor.RichTextEditorVariant;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;

@Route("rich-text-editor-theme-compact")
public class RichTextEditorThemeCompact extends Div {

    public RichTextEditorThemeCompact() {
        // tag::snippet[]
        RichTextEditor rte = new RichTextEditor();
        rte.getStyle().set("max-height", "400px");
        String valueAsDelta = DataService.getTemplates().getRichTextDelta();
        rte.asDelta().setValue(valueAsDelta);
        rte.addThemeVariants(RichTextEditorVariant.LUMO_COMPACT);
        add(rte);
        // end::snippet[]
    }

}

No Border

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

Open in a
new tab

Source code

rich-text-editor-theme-no-border.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/rich-text-editor';

import templates from '../../../../src/main/resources/data/templates.json';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('rich-text-editor-no-border')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private richText = templates.richTextDelta;

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-rich-text-editor
        style="height: 400px;"
        theme="no-border"
        .value="${this.richText}"
      ></vaadin-rich-text-editor>
      <!-- end::snippet[] -->
    `;
  }
}
RichTextEditorThemeNoBorder.javapackage com.vaadin.demo.component.richtexteditor;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.richtexteditor.RichTextEditor;
import com.vaadin.flow.component.richtexteditor.RichTextEditorVariant;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;

@Route("rich-text-editor-theme-no-border")
public class RichTextEditorThemeNoBorder extends Div {

    public RichTextEditorThemeNoBorder() {
        // tag::snippet[]
        RichTextEditor rte = new RichTextEditor();
        rte.getStyle().set("max-height", "400px");
        String valueAsDelta = DataService.getTemplates().getRichTextDelta();
        rte.asDelta().setValue(valueAsDelta);
        rte.addThemeVariants(RichTextEditorVariant.LUMO_NO_BORDER);
        add(rte);
        // end::snippet[]
    }

}

History

Button Title Description

Button	Title	Description
	Undo	Reverses the previous action
	Redo	Restores actions undone by `Undo`

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

Button

Title

Description

Bold

Boldens text

Italic

Italicizes text

Underline

Underlines text

Strikethrough

Strikes through text

Headings

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

Button	Title	Description
H1	H1	Heading level 1
H2	H2	Heading level 2
H3	H3	Heading level 3

Button

Title

Description

Heading level 1

Heading level 2

Heading level 3

Subscript and Superscript

Button	Title	Description
X	Subscript	Subscript text is positioned _below the normal baseline and with smaller font size
X	Superscript	Superscript text is positioned ^above the normal baseline and with smaller font size

Button

Title

Description

Subscript

Subscript text is positioned _below the normal baseline and with smaller font size

Superscript

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

List

Button	Title	Description
	Ordered list	Creates a numbered list
	Unordered list	Creates a bulleted list

Button

Title

Description

Ordered list

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

Left align

Left-aligns text (default)

Center align

Center-aligns text

Right align

Right-aligns text

Image and Link

Button	Title	Description
	Image	Uploads and inserts an image from your device
	Link	Creates a hyperlink

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

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

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.

Component

Usage recommendations

Text Field

Basic single-line text input.

Text Area

Basic multi-line text input.

DC8286C2-D152-4234-831F-F90A00B97305

Documentation

Documentation

Rich Text Editor

Value Format

Read-Only

Automatic Height Adjustment

Minimum and Maximum Height

Theme Variants

Compact

No Border

History

Emphasis

Headings

Subscript and Superscript

List

Alignment

Image and Link

Blocks

Clear

Documentation

Value Format

Read-Only

Automatic Height Adjustment

Minimum and Maximum Height

Theme Variants

Compact

No Border

Toolbar Actions

History

Emphasis

Headings

Subscript and Superscript

List

Alignment

Image and Link

Blocks

Clear

Related Components