---
title: RichTextEditor
description: RichTextEditor
element: vaadin-rich-text-editor
---

## Description

`<vaadin-rich-text-editor>` is a Web Component for rich text editing.
It provides a set of toolbar controls to apply formatting on the content,
which is stored and can be accessed as HTML5 or JSON string.

```html
<vaadin-rich-text-editor></vaadin-rich-text-editor>
```

Vaadin Rich Text Editor focuses on the structure, not the styling of content.
Therefore, the semantic HTML5 tags such as `<h1>`, `<strong>` and `<ul>` are used,
and CSS usage is limited to most common cases, like horizontal text alignment.

### Styling

The following state attributes are available for styling:

Attribute    | Description
-------------|------------------------------
`disabled`   | Set to a disabled text editor
`readonly`   | Set to a readonly text editor

The following shadow DOM parts are available for styling:

Part name                            | Description
-------------------------------------|----------------
`content`                            | The content wrapper
`toolbar`                            | The toolbar wrapper
`toolbar-group`                      | The group for toolbar controls
`toolbar-group-history`              | The group for history controls
`toolbar-group-emphasis`             | The group for emphasis controls
`toolbar-group-heading`              | The group for heading controls
`toolbar-group-style`                | The group for style controls
`toolbar-group-glyph-transformation` | The group for glyph transformation controls
`toolbar-group-list`                 | The group for list controls
`toolbar-group-indent`               | The group for indentation controls
`toolbar-group-alignment`            | The group for alignment controls
`toolbar-group-rich-text`            | The group for rich text controls
`toolbar-group-block`                | The group for preformatted block controls
`toolbar-group-format`               | The group for format controls
`toolbar-button`                     | The toolbar button (applies to all buttons)
`toolbar-button-pressed`             | The toolbar button in pressed state (applies to all buttons)
`toolbar-button-undo`                | The "undo" button
`toolbar-button-redo`                | The "redo" button
`toolbar-button-bold`                | The "bold" button
`toolbar-button-italic`              | The "italic" button
`toolbar-button-underline`           | The "underline" button
`toolbar-button-strike`              | The "strike-through" button
`toolbar-button-color`               | The "color" button
`toolbar-button-background`          | The "background" button
`toolbar-button-h1`                  | The "header 1" button
`toolbar-button-h2`                  | The "header 2" button
`toolbar-button-h3`                  | The "header 3" button
`toolbar-button-subscript`           | The "subscript" button
`toolbar-button-superscript`         | The "superscript" button
`toolbar-button-list-ordered`        | The "ordered list" button
`toolbar-button-list-bullet`         | The "bullet list" button
`toolbar-button-outdent`             | The "decrease indentation" button
`toolbar-button-indent`              | The "increase indentation" button
`toolbar-button-align-left`          | The "left align" button
`toolbar-button-align-center`        | The "center align" button
`toolbar-button-align-right`         | The "right align" button
`toolbar-button-image`               | The "image" button
`toolbar-button-link`                | The "link" button
`toolbar-button-blockquote`          | The "blockquote" button
`toolbar-button-code-block`          | The "code block" button
`toolbar-button-clean`               | The "clean formatting" button

The following custom CSS properties are available for styling:

Custom CSS property            |
:-------------------------------|
`--vaadin-rich-text-editor-background` |
`--vaadin-rich-text-editor-content-color` |
`--vaadin-rich-text-editor-content-font-size` |
`--vaadin-rich-text-editor-content-line-height` |
`--vaadin-rich-text-editor-content-padding` |
`--vaadin-rich-text-editor-toolbar-background` |
`--vaadin-rich-text-editor-toolbar-gap` |
`--vaadin-rich-text-editor-toolbar-padding` |
`--vaadin-rich-text-editor-toolbar-button-background` |
`--vaadin-rich-text-editor-toolbar-button-border-width` |
`--vaadin-rich-text-editor-toolbar-button-border-color` |
`--vaadin-rich-text-editor-toolbar-button-border-radius` |
`--vaadin-rich-text-editor-toolbar-button-text-color` |
`--vaadin-rich-text-editor-toolbar-button-padding` |

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### colorOptions

**Type:** `string[]`

The list of colors used by the background and text color
selection controls. Should contain an array of HEX strings.

When user selects `#000000` (black) as a text color,
or `#ffffff` (white) as a background color, it resets
the corresponding format for the selected text.

### disabled

**Type:** `boolean`

When true, the user can not modify, nor copy the editor content.

### htmlValue

**Type:** `string | null | undefined`

HTML representation of the rich text editor content.

### i18n

**Type:** `RichTextEditorI18n`

The object used to localize this component. To change the default
localization, replace this with an object that provides all properties, or
just the individual properties you want to change.

The properties are used e.g. as the tooltips for the editor toolbar
buttons.

See also: [RichTextEditorI18n](#richtexteditori18n)

### readonly

**Type:** `boolean`

When true, the user can not modify the editor content, but can copy it.

### value

**Type:** `string`

Value is a list of the operations which describe change to the document.
Each of those operations describe the change at the current index.
They can be an `insert`, `delete` or `retain`. The format is as follows:

```js
 [
   { insert: 'Hello World' },
   { insert: '!', attributes: { bold: true }}
 ]
```

See also https://github.com/quilljs/delta for detailed documentation.

## Methods

### dangerouslySetHtmlValue

**Type:** `(htmlValue: string) => void`

Sets content represented by HTML snippet into the editor.
The snippet is interpreted by [Quill's Clipboard matchers](https://quilljs.com/docs/modules/clipboard/#matchers),
which may not produce the exactly input HTML.

**NOTE:** Improper handling of HTML can lead to cross site scripting (XSS) and failure to sanitize
properly is both notoriously error-prone and a leading cause of web vulnerabilities.
This method is aptly named to ensure the developer has taken the necessary precautions.

## Events

### html-value-changed

**Type:** [RichTextEditorHtmlValueChangedEvent](#richtexteditorhtmlvaluechangedevent)

Fired when the `htmlValue` property changes.

### value-changed

**Type:** [RichTextEditorValueChangedEvent](#richtexteditorvaluechangedevent)

Fired when the `value` property changes.

## Types

### RichTextEditorHtmlValueChangedEvent

```ts
/**
 * Fired when the `htmlValue` property changes.
 */
export type RichTextEditorHtmlValueChangedEvent = CustomEvent<{ value: string }>;
```

### RichTextEditorI18n

```ts
export interface RichTextEditorI18n {
  undo?: string;
  redo?: string;
  bold?: string;
  italic?: string;
  underline?: string;
  strike?: string;
  color?: string;
  background?: string;
  h1?: string;
  h2?: string;
  h3?: string;
  subscript?: string;
  superscript?: string;
  listOrdered?: string;
  listBullet?: string;
  outdent?: string;
  indent?: string;
  alignLeft?: string;
  alignCenter?: string;
  alignRight?: string;
  image?: string;
  link?: string;
  blockquote?: string;
  codeBlock?: string;
  clean?: string;
  linkDialogTitle?: string;
  ok?: string;
  cancel?: string;
  remove?: string;
}
```

### RichTextEditorValueChangedEvent

```ts
/**
 * Fired when the `value` property changes.
 */
export type RichTextEditorValueChangedEvent = CustomEvent<{ value: string }>;
```