问题描述:
在使用WangEditor的富文本编辑器的时候,发现有些html内容通过setHtml()
方法传进来会被吞掉样式,因此通过分析官网文档,确认应该使用dangerouslyInsertHtml(),但发现直接使用此方法并没有生效,因此去查看官网文档说明。
官方文档链接:
编辑器 API | wangEditor
官网文档内容如下:
和我本地使用并无不同呀,因此去官网demo页面去测试,发现demo页面可以正确的使用setHtml()方法并有效展示,很疑惑,demo页面效果如下(此处设计公司数据保密,删掉了大量的html文本,只保留了示例样式段落):
于是开始找源码分析和我本地使用有何不同。
官网demo页面链接:
wangEditor set HTML
源码对比:
github上托管的源码:
// Set HTML
document.getElementById('btn-set-html').addEventListener('click', () => {
editor.setHtml(textarea.value)
})
demo页面上的源码(重要):
// Set HTML
document.getElementById('btn-set-html').addEventListener('click', () => {
if (editor.isDisabled()) editor.enable()
if (!editor.isFocused()) editor.focus()
editor.select([])
editor.deleteFragment()
E.SlateTransforms.setNodes(editor, { type: 'paragraph' }, { mode: 'highest' })
editor.dangerouslyInsertHtml(textarea.value)
})
结论:
虽然文档上给的是用setHtml()方法,但实际上使用的是dangerouslyInsertHtml()方法,且需要对editor进行焦点选中等操作。我依照demo页面上的源码使用方式进行操作后成功实现想要的效果,大家也可以参考上述代码进行dangerouslyInsertHtml()方法的使用。
本文到此结束。