如何解决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 中看到更多。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。