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

问题描述

我想通过属性设置富文本编辑器组件的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

解决方法

htmlValue 中的 <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 中看到更多。