Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Rich Text Editor

Note
Commercial feature

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

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
RichTextEditor rte = new RichTextEditor();
rte.setMaxHeight("400px");
String valueAsDelta = DataService.getTemplates().getRichTextDelta();
rte.setValue(valueAsDelta);
add(rte);

Read-Only

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

Open in a
new tab
RichTextEditor rte = new RichTextEditor();
rte.setMaxHeight("400px");
String valueAsDelta = DataService.getTemplates().getRichTextDelta();
rte.setValue(valueAsDelta);
rte.setReadOnly(true);
add(rte);

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 rte = new RichTextEditor();
rte.setMaxHeight("400px");
rte.setMinHeight("200px");
String valueAsDelta = DataService.getTemplates().getRichTextDelta();
rte.setValue(valueAsDelta);
add(rte);

Theme Variants

Compact

Apply the compact theme to make the toolbar more compact.

Open in a
new tab
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);

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
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);

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
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);

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

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

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

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 of formatted as code

Clear

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.

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