Vaadin 14：无法通过 vaadin 富文本编辑器的属性设置 HTML 值

Question

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

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

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

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

组件查看结果
谷歌浏览器开发者工具元素检查

Answer 1

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

但正如名称所示和文档所述：

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>');

您可以在组件文档中查看更多信息。