CODEWITHSUNDEEP
vaadinvaadin-flowvaadin14
user15905221
user15905221

Reputation: 95

Vaadin 14: cannot set HTML value by attribute to vaadin rich text editor

I want to set the html value of a rich text editor component by attribute.

The tag and attributes below results in the printscreen below. How can I set the html-value by attribute?

<vaadin-rich-text-editor html-value="<p>Hello</p>"></vaadin-rich-text-editor>

In the element inspection I can see the value but the value which was set is just <p><br></p> instead of <p>Hello</p>. (see printscreens below)

component view result
google chrome developer tools element inspection

Upvotes: 3

Views: 617

Answers (1)

Jens Jansson
Jens Jansson

Reputation: 4686

The htmlValue property in <vaadin-rich-text-editor>is read only, so it can't be used to set values. Setting HTML to a property in HTML opens up risks. You can set the value as HTML from JavaScript, with the dangerouslySetHtmlValue(htmlValue) function.

But as the name indicates, and the documentation says:

Sets content represented by HTML snippet into the editor.
The snippet is interpreted by [Quill's Clipboard matchers](https://quilljs.com/docs/modules/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.
@param {string} htmlValue

I tested this code and it works:

this.richTextEditor.dangerouslySetHtmlValue('<p>hello <b>world</b></p>');

Picture of Rich Text Editor with set HTML

You can see more in the component documentation.

Upvotes: 5

Related Questions