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