> Markdown version of [Rich Text Editor](https://vaadin.com/docs/v14/ds/components/rich-text-editor). Section index: [llms.txt](https://vaadin.com/docs/v14/ds/llms.txt)

# Rich Text Editor

> **Note: Commercial feature**
>
> A commercial Vaadin subscription is required to use Rich Text Editor in your project.
>
> - [Start Free Trial](https://vaadin.com/trial)
>
> - [See Pricing](https://vaadin.com/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.

`RichTextEditorBasic.java`

```java
RichTextEditor rte = new RichTextEditor();
rte.setMaxHeight("400px");
String valueAsDelta = DataService.getTemplates().getRichTextDelta();
rte.setValue(valueAsDelta);
add(rte);
```

## <a id="read-only"></a>Read-Only

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

`RichTextEditorReadonly.java`

```java
RichTextEditor rte = new RichTextEditor();
rte.setMaxHeight("400px");
String valueAsDelta = DataService.getTemplates().getRichTextDelta();
rte.setValue(valueAsDelta);
rte.setReadOnly(true);
add(rte);
```

## <a id="automatic-height-adjustment"></a>Automatic Height Adjustment

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

### <a id="minimum-and-maximum-height"></a>Minimum and Maximum Height

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

`RichTextEditorMinMaxHeight.java`

```java
RichTextEditor rte = new RichTextEditor();
rte.setMaxHeight("400px");
rte.setMinHeight("200px");
String valueAsDelta = DataService.getTemplates().getRichTextDelta();
rte.setValue(valueAsDelta);
add(rte);
```

## <a id="theme-variants"></a>Theme Variants

### <a id="compact"></a>Compact

Apply the `compact` theme to make the toolbar more compact.

`RichTextEditorThemeCompact.java`

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

### <a id="no-border"></a>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.

`RichTextEditorThemeNoBorder.java`

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

## <a id="value-format"></a>Value Format

Rich Text Editor natively uses the JSON-based [Delta format](https://github.com/quilljs/delta) for reading and setting its value, but HTML values can also be used with some limitations.

`RichTextEditorSetGetValue.java`

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

## <a id="toolbar-actions"></a>Toolbar Actions

### <a id="history"></a>History

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

### <a id="emphasis"></a>Emphasis

| Button | Title         | Description         |
| ------ | ------------- | ------------------- |
| B      | Bold          | **Boldens text**    |
| I      | Italic        | *Italicizes text*   |
| U      | Underline     | Underlines text     |
| T      | Strikethrough | Strikethroughs text |

### <a id="headings"></a>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 |

### <a id="subscript-superscript"></a>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 |

### <a id="list"></a>List

| Button | Title          | Description               |
| ------ | -------------- | ------------------------- |
|        | Ordered list   | • Creates a numbered list |
|        | Unordered list | • Creates a bulleted list |

### <a id="alignment"></a>Alignment

| Button | Title        | Description                |
| ------ | ------------ | -------------------------- |
|        | Left align   | Left aligns text (default) |
|        | Center align | Center aligns text         |
|        | Right align  | Right aligns text          |

### <a id="image-link"></a>Image & Link

| Button | Title | Description                                   |
| ------ | ----- | --------------------------------------------- |
|        | Image | Uploads and inserts an image from your device |
|        | Link  | [Creates a hyperlink](https://vaadin.com/)    |

### <a id="blocks"></a>Blocks

| Button | Title       | Description                                  |
| ------ | ----------- | -------------------------------------------- |
| ”      | Block quote | Creates a section quoted from another source |
| <>     | Code block  | Creates a block of formatted as code         |

### <a id="clear"></a>Clear

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

## <a id="related-components"></a>Related Components

| Component                                                             | Usage recommendations         |
| --------------------------------------------------------------------- | ----------------------------- |
| [Text Field](https://vaadin.com/docs/v14/ds/components/text-field.md) | Basic single-line text input. |
| [Text Area](https://vaadin.com/docs/v14/ds/components/text-area.md)   | Basic multi-line text input.  |

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