Rich Text Editor
Note
|
Commercial feature
A commercial Vaadin subscription is required to use Rich Text Editor in your project. |
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.
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.
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.
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.
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.
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.
new tab
<vaadin-rich-text-editor
style="height: 400px;"
@change="${(e: RichTextEditorChangeEvent) => (this.htmlValue = e.target.htmlValue || '')}"
></vaadin-rich-text-editor>
<vaadin-text-area
label="Html Value"
@change="${(e: TextAreaChangeEvent) => this.setHtmlValue(e.target.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);
}
Toolbar Actions
History
Button | Title | Description |
---|---|---|
Undo |
Reverses the previous action |
|
Redo |
Restores actions undone by |
Emphasis
Button | Title | Description |
---|---|---|
Bold |
Boldens text |
|
Italic |
Italicizes text |
|
Underline |
Underlines text |
|
Strikethrough |
Strikes through text |
Headings
Three different headings are available in Rich Text Editor: H1, H2 ,and H3. Use them to signify structure (and importance).
Button | Title | Description |
---|---|---|
H1 |
Heading level 1 |
|
H2 |
Heading level 2 |
|
H3 |
Heading level 3 |
Subscript and Superscript
Button | Title | Description |
---|---|---|
Subscript |
Subscript text is positioned below the normal baseline and with smaller font size |
|
Superscript |
Superscript text is positioned above the normal baseline and with smaller font size |
List
Button | Title | Description |
---|---|---|
Ordered list |
|
|
Unordered list |
|
Alignment
Button | Title | Description |
---|---|---|
Left align |
Left-aligns text (default) |
|
Center align |
Center-aligns text |
|
Right align |
Right-aligns text |
Related Components
Component | Usage recommendations |
---|---|
Basic single-line text input. |
|
Basic multi-line text input. |
DC8286C2-D152-4234-831F-F90A00B97305