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

Question

我想通过属性设置富文本编辑器组件的html值。

下面的标签和属性会产生下面的打印屏幕。如何通过属性设置 html 值？

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

在元素检查中我可以看到值，但设置的值只是 <p><br></p>而不是 <p>Hello</p> . (见下面的打印屏幕)

component view result
google chrome developer tools element inspection

Answer 1

htmlValue属性(property) <vaadin-rich-text-editor>是只读的，因此不能用于设置值。将 HTML 设置为 HTML 中的属性会带来风险。您可以使用 dangerouslySetHtmlValue(htmlValue) 从 JavaScript 将值设置为 HTML功能。

但正如名称和文档所述:

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

我测试了这段代码，它有效:

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

您可以在 component documentation 中看到更多信息.