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
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>');
You can see more in the component documentation.