wangeditor实现编辑功能

在开发过程中，我们经常会需要在富文本编辑器中选中一个区域，进行一些操作之后，重新修改当前选中的区域，目前wangeditor没有提供修改的方法，所以变相采用删除当前选中区域，再加入修改后的数据，来达到修改的操作。下面，就介绍一下如何使用（以编辑图片为例）：

一、引入

在页面中引入

import { SlateEditor, SlateElement, SlateNode, SlateTransforms } from '@wangeditor/editor'

二、删除选中区域

注：

• SlateTransforms：引入的实例；
• editor：当前编辑器的实例（例如在官网中@onCreated时间中有一个editor参数，这个参数就是下面的这个editor）；
• image：当前是要删除的类型，比如我现在要删除的是图片类型，那个写image；

注意：不要直接使用SlateTransforms.removeNodes(editor),会导致当前选中的区域清空，且编辑器无法聚焦上。

SlateTransforms.removeNodes(editor, {
	match: n => DomEditor.checkNodeType(n, 'image'),
})

三、插入内容

采用官网说明dangerouslyInsertHtml方法，具体setHtml的区别，请查看官方文档。

• this.editorRef：当前编辑器的实例；
• data：当前要插入的html；

this.editorRef.dangerouslyInsertHtml(data)