Vaadin WC API reference

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

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 }>;