首页 前端知识 WangEditor 5.0版本dangerouslyInsertHtml方法的正确使用方式

WangEditor 5.0版本dangerouslyInsertHtml方法的正确使用方式

2024-06-20 00:06:19 前端知识 前端哥 686 656 我要收藏

问题描述:

在使用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()方法的使用。
本文到此结束。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12910.html
评论
发布的文章

jQuery实现简单抽奖大转盘

2024-07-01 23:07:44

jQuery思维导图

2024-07-01 23:07:43

在jQuery中添加表格行

2024-07-01 23:07:36

jquery数据类型转换

2024-07-01 23:07:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!