Rich Text Editor

Read-Only
Automatic Height Adjustment
Theme Variants
Value Format
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

RichTextEditorBasic.javapackage com.vaadin.demo.component.richtexteditor;

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

@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.setValue(valueAsDelta);
    add(rte);
    // 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

RichTextEditorReadonly.javapackage com.vaadin.demo.component.richtexteditor;

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

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

RichTextEditorMinMaxHeight.javapackage com.vaadin.demo.component.richtexteditor;

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

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

RichTextEditorThemeCompact.javapackage com.vaadin.demo.component.richtexteditor;

import com.vaadin.demo.domain.DataService;
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;

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

RichTextEditorThemeNoBorder.javapackage com.vaadin.demo.component.richtexteditor;

import com.vaadin.demo.domain.DataService;
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;

@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.setValue(valueAsDelta);
    rte.addThemeVariants(RichTextEditorVariant.LUMO_NO_BORDER);
    add(rte);
    // end::snippet[]
  }

}

Value Format

Rich Text Editor natively uses the JSON-based Delta format for reading and setting its value, but HTML values can also be used with some limitations.

Open in a
new tab

Source code

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.router.Route;

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

  public RichTextEditorSetGetValue() {
    // tag::snippet[]
    TextArea textArea = new TextArea("Html Value", "Type html string here to set it as value to the Rich Text Editor above...");
    textArea.setWidthFull();

    RichTextEditor rte = new RichTextEditor();
    rte.getStyle().set("max-height", "400px");

    rte.asHtml().addValueChangeListener(e -> textArea.setValue(e.getValue()));
    textArea.addValueChangeListener(e -> {
      if (!rte.asHtml().getValue().equals(e.getValue())) {
        rte.asHtml().setValue(e.getValue());
      }
    });
    add(rte, textArea);
    // 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	Strikethroughs text

Button

Title

Description

Bold

Boldens text

Italic

Italicizes text

Underline

Underlines text

Strikethrough

Strikethroughs text

Headings

Three different headings are available in Rich Text Editor; H1, H2 and H3. Use them in order 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 & 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 & 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 of formatted as code

Button

Title

Description

”

Block quote

Creates a section quoted from another source

Code block

Creates a block of formatted as code

Clear

Button	Title	Description
	Clear formatting	Removes any and all formatting of the selected text

Button

Title

Description

Clear formatting

Removes any and 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.

3401C535-1DAF-4DD4-8606-AEE67E7431CA

Docs

Docs

Rich Text Editor

Read-Only

Automatic Height Adjustment

Minimum and Maximum Height

Theme Variants

Compact

No Border

Value Format

History

Emphasis

Headings

Subscript & Superscript

List

Alignment

Image & Link

Blocks

Clear

Docs

Read-Only

Automatic Height Adjustment

Minimum and Maximum Height

Theme Variants

Compact

No Border

Value Format

Toolbar Actions

History

Emphasis

Headings

Subscript & Superscript

List

Alignment

Image & Link

Blocks

Clear

Related Components