wangEditor在弹窗中的销毁注意事项，报错Error: Cannot resolve a Slate range from DOM rang
问题描述
在el-dialog弹窗中使用wangEditor，编辑后再打开弹窗报错：Error: Cannot resolve a Slate range from DOM rang;
经排查是销毁没做好，需要在弹窗关闭时进行销毁，但复制销毁代码放到弹窗取消事件中，又报错：Error: Cannot find textarea instance by editor
解决方案
首先要注意dialog弹窗是类似v-if的渲染操作，DOM不会存在，那么关闭后，你的editorRef实例还存在，再次打开编辑器内部的 Slate 编辑器核心仍会保留上次的 DOM 选区状态。再次打开弹窗时，新的 DOM 结构与旧的选区状态不匹配，导致无法解析 range
此时需要两部操作：
- 在取消事件中增加销毁逻辑
const editor = editorRef.value;if (editor == null) return;editor.destroy();
- 在html中，将Toolbar、Editor两个组件用v-if进行包裹
这一步很重要，不仅仅要销户editorRef实例，还有将组件残留清空一下
<div v-if="action.show" style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig"mode="default"/><Editorv-model="action.data.content"style="height: 500px; overflow-y: hidden":defaultConfig="editorConfig"mode="default"@onCreated="handleCreated"/>
</div>