wangEditor富文本编辑器-vue使用链接

• 官网
  http://www.wangeditor.com/index.html
• 使用文档
  https://www.wangeditor.com/doc/
• github代码for vue
  https://github.com/wangeditor-team/wangEdior-with-vue
• 使用参考
  https://www.jianshu.com/p/52852d39f869
  https://www.cnblogs.com/zzz-knight/p/12156438.html

增加自定义菜单键资料补充(2021-05-27)

• 增加需求：上角标和下角标的功能
  使用html实现只需要两个标签，但是自定义加在wangeditor就比较麻烦

1
2
3
<sup>下角标</sup>
<sub>上角标</sub>

• 官方自定义菜单示例代码
  https://www.wangeditor.com/doc/pages/11-自定义扩展菜单/01-快速扩展一个菜单.html
  其实已经比较清楚了，如何在vue-框架项目中使用，参考下面
• 如何在vue-框架项目中自定义菜单示例
  https://blog.csdn.net/JCAL123/article/details/113341513
• 补充一个
  https://blog.csdn.net/qq_39235055/article/details/107016627
• 中途参考了加粗的官方源码
  https://github.com/wangeditor-team/wangEditor/blob/master/src/menus/bold/index.ts
• 中间一度被Document.execCommand()底层的基础api搞疯
  https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
  也就是官方文档里面的editor.cmd.do(‘subscript’)/editor.cmd.do(‘superscript’, false, null)
• 最后还是自己写了逻辑，用editor.cmd.do(‘insertHTML’, …)方法实现了
  贴一部分代码给大家参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// _this = this.editor
// 菜单点击事件
clickHandler() {
const selectedText = _this.selection.getSelectionText()
const SelectionContainerElem = _this.selection.getSelectionContainerElem().elems[0].outerHTML
const reg = /<sub>/g
const res = reg.test(SelectionContainerElem)
if (res) {
const indexStart = SelectionContainerElem.indexOf('<sub>')
const newValue = selectedText.replace('<sub>', '').replace('</sub>', '')
if (indexStart === 0) {
_this.cmd.do('insertHTML', newValue)
} else {
_this.cmd.do('insertHTML', `<sub>${newValue}</sub>`)
}
} else {
const newValue = `<sub>${selectedText}</sub>`
_this.cmd.do('insertHTML', newValue)
}
}

最后

以上就是忐忑翅膀最近收集整理的关于wangEditor富文本编辑器-vue使用链接的全部内容，更多相关wangEditor富文本编辑器-vue使用链接内容请搜索靠谱客的其他文章。