vue3+TS中使用WangEditor 5 使用记录

前提

编辑器响应式对象为 editorRef.value

例子只是开发中的简单思路记录，实际使用需谨慎！！！

自定义注册工具栏

可以使用Boot.registerModule() 方法，在实际使用时，需要判断一下是否已经注册过某项自定义工具，注册过不再重复注册。可用getAllMenuKeys判断。例如需要判断Rewrite，可以打印以下代码查看结果

editorRef.value.getAllMenuKeys().includes('Rewrite')

自定义工具栏的图标

 文字和图标二选一，当需要的时图标+文字时，考虑把文字和图标做成一个图标，然后再去调样式

动态控制hoverbarKeys

可用 editorRef.value.getConfig().toolbarKeys 查看当前的默认配置和设置新的配置。

let barKeys = editorRef.value.getConfig().hoverbarKeys

 清空 

barKeys['text'].menuKeys = []

 设置bold

barKeys['text'].menuKeys = ['bold']

自定义目录与点击目录跳转

可使用官方文档提供的两个通过 type 获取编辑器的 element 列表的API，getElemsByTypePrefix和getElemsByType来实现。

editorRef.value.getElemsByTypePrefix('header') // 获取所有标题 header1 header2 header3..
editorRef.value.getElemsByType('image') // 所有图片
editorRef.value.getElemsByType('link') // 所有链接

type 可以是自定义的节点类型和编辑器默认的类型，可打印editorRef.value.children 查看节点类型。

实现思路：

1. 构建目录数据
   1. 遍历element 列表，提取需要的信息，最少需要标题（接口数据）、节点id（编辑器自动生成）
   2. 由于编辑器，写入内容会造成节点变动，建议生成目录时去重
2. 滚动节点 editorRef.value.scrollToElem(elemId) 

点击目录跳转后，光标移动到elemId的首位

  let range = document.createRange()
  let sel = window.getSelection()
  range.setStart(targetElement, 0) //设置范围的起始点
  range.collapse(true) // 将文本范围折叠到起始点或终点
  if(sel){ 
    sel.removeAllRanges() // 从选择中移除所有范围对象
    sel.addRange(range) // 向选择中添加一个范围对象
  }

编辑器的占位不是简单的文字

是可以实现的，需要写好html字符串片段，需要加上行内样式（图片没有试过）。

如何判断编辑器中内容发生了变化

 WangEditor5 提供了onChange，可获取编辑器内容、选区变化时的回调函数。

只比较文字变化不含样式：可获取编辑器的纯文字进行比较。

editorRef.value.getText() 

由于项目不需要设置文字样式，含样式的变化没有研究。