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. |
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.
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.
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.
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.
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.
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.
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 |
Emphasis
| 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 | Heading level 1 | |
H2 | Heading level 2 | |
H3 | Heading level 3 |
Subscript & Superscript
| 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 |
| |
Unordered list |
|
Alignment
| Button | Title | Description |
|---|---|---|
Left align | Left aligns text (default) | |
Center align | Center aligns text | |
Right align | Right aligns text |