My Design System

My Design System

Rich Text Editor

Source: TypeScript / Java

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

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

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

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

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

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

Creates a hyperlink

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.