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.

<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

, and

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

See 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

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:

 [
   { 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, 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

Fired when the htmlValue property changes.

value-changed #

Type: RichTextEditorValueChangedEvent

Fired when the value property changes.

Types #

RichTextEditorHtmlValueChangedEvent #

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

RichTextEditorI18n #

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 #

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