Note
Subscription required

Rich Text Editor is included in Pro, Prime, and Enterprise subscriptions.

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.

Note
Work In Progress

The Java examples for this component are currently in progress. In the meantime, you can view the previous examples.

<vaadin-rich-text-editor
  style="max-height: 400px"
  value="${this.richText}"
></vaadin-rich-text-editor>

Read-Only

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

<vaadin-rich-text-editor
  style="height: 400px;"
  readonly
  .value="${this.richText}"
></vaadin-rich-text-editor>

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.

<vaadin-rich-text-editor
  style="min-height:200px; max-height: 400px;"
  .value="${this.richText}"
></vaadin-rich-text-editor>

Theme Variants

Compact

Apply the compact theme to make the toolbar more compact.

<vaadin-rich-text-editor
  style="height: 400px;"
  theme="compact"
  .value="${this.richText}"
></vaadin-rich-text-editor>

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.

<vaadin-rich-text-editor
  style="height: 400px;"
  theme="no-border"
  .value="${this.richText}"
></vaadin-rich-text-editor>

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.

<vaadin-rich-text-editor
      style="height: 400px;"
      @change="${this.syncHtmlValue}"
    ></vaadin-rich-text-editor>

    <vaadin-text-area
      label="Html Value"
      @change="${(e: CustomEvent) => this.setHtmlValue((e.target as TextAreaElement).value)}"
      placeholder="Type html string here to set it as value to the Rich Text Editor above..."
      style="width: 100%;"
      .value="${this.htmlValue}"
    ></vaadin-text-area>
setHtmlValue(htmlValue: string) {
  this.richTextEditor.dangerouslySetHtmlValue(htmlValue);
}

syncHtmlValue() {
  this.htmlValue = this.richTextEditor.htmlValue || '';
}

Toolbar Actions

History

ButtonTitleDescription

Undo

Reverses the previous action

Redo

Restores actions undone by Undo

Emphasis

ButtonTitleDescription

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

ButtonTitleDescription

H1

H1

Heading level 1

H2

H2

Heading level 2

H3

H3

Heading level 3

Subscript & Superscript

ButtonTitleDescription

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

ButtonTitleDescription

Ordered list

  1. Creates a numbered list

Unordered list

  • Creates a bulleted list

Alignment

ButtonTitleDescription

Left align

Left aligns text (default)

Center align

Center aligns text

Right align

Right aligns text

ButtonTitleDescription

Image

Uploads and inserts an image from your device

Link

Blocks

ButtonTitleDescription

Block quote

Creates a section quoted from another source

<>

Code block

Creates a block of formatted as code

Clear

ButtonTitleDescription

Clear formatting

Removes any and all formatting of the selected text

ComponentUsage recommendations

Text Field

Basic single-line text input.

Text Area

Basic multi-line text input.