wangEditor-v5使用

1、介绍

wangeditor基于 slate 内核开发，但不依赖于 React ，所以它本身是无框架依赖的。并且，官方封装了 Vue React 组件，可以很方便的用于 Vue React 等框架。

本文介绍的是wangeditor v5版本，所用到的项目例子和版本是vue3+wangeditor v5

2、安装

安装 editor

yarn add @wangeditor/editor# 或者 npm install @wangeditor/editor --save

安装 React 组件

yarn add @wangeditor/editor-for-react
# 或者 npm install @wangeditor/editor-for-react --save

安装 Vue2 组件

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

安装 Vue3 组件

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

3、创建编辑器

项目准备前，需安装 @wangeditor/editor 和 @wangeditor/editor-for-vue@next

在vue3项目中的文件中新建模板

<template><div style="border: 1px solid #ccc"><Toolbar:editorId="editorId":defaultConfig="toolbarConfig":mode="mode"style="border-bottom: 1px solid #ccc"/><Editor:editorId="editorId":defaultConfig="editorConfig":defaultContent="getDefaultContent":mode="mode"style="height: 500px"/></div>
</template>

<script>
import { computed, onBeforeUnmount, ref } from 'vue'
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
import cloneDeep from 'lodash.clonedeep'export default {components: { Editor, Toolbar },setup() {const editorId = 'editor' //【注意】编辑器 id ，要全局唯一const defaultContent = []const getDefaultContent = computed(() => { // 注意，要深拷贝 defaultContent ，否则报错return cloneDeep(defaultContent.value)}) // 注意，要深拷贝 defaultContent ，否则报错const toolbarConfig = {}const editorConfig = { placeholder: '请输入内容...' }// 组件销毁时，也及时销毁编辑器onBeforeUnmount(() => {const editor = getEditor(editorId)if (editor == null) returnsetTimeout(() => { //此处最好异步处理，否则销毁编辑器可能会报错editor.destroy()}, 100)removeEditor(editorId)})return {editorId,mode: 'default',getDefaultContent,toolbarConfig,editorConfig,};}
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style> //引入样式

toolbarConfig可以设置需要或者不需要的工具栏选项

 const toolbarConfig = {excludeKeys: ["fullScreen", "code", "codeBlock", "bulletedList",              "numberedList", "blockquote", "bold", "italic"] //此处不需要的工具栏选项
}

想要获取工具栏选项可以执行一下代码

import { DomEditor } from '@wangeditor/editor'
const toolbar = DomEditor.getToolbar(editor)
const menu = editor.getAllMenuKeys()
const bar = toolbar.getConfig().toolbarKeys

4、异步设置内容

如果需要从接口获取内容，渲染进wangeditor组件，注意，不可以直接修改 defaultContent ，而是要异步渲染组件。可以使用 Vue3 ref 定义一个响应式变量 isEditorShow = false，在请求结束时设置为 true

import { computed, ref, reactive } from 'vue'const defaultContent = ref([])const isEditorShow = ref(false)const getDefaultContent = computed(() => { return cloneDeep(defaultContent.value)})

  const getRichText = () => {YourApi().then(res => {defaultContent.value = res.data.protocolContent //拿到后端返回的数据isEditorShow.value = true})}

   <div v-if="isEditorShow" style="border: 1px solid #ccc"><Toolbar:editorId="editorId":defaultConfig="toolbarConfig":mode="mode"style="border-bottom: 1px solid #ccc"/><Editor:editorId="editorId":defaultConfig="editorConfig":defaultContent="getDefaultContent":mode="mode"style="height: 500px"/></div>

注：后端返回的数据格式，应该和编写传输的格式一样通过以下代码获取(或者查看官方文档介绍 https://www.wangeditor.com/v5/guide/node-define.html#%E6%98%AF%E4%BB%80%E4%B9%88

 import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'const editor = getEditor(editorId)const children = editor.children

5、多个编辑器的使用

wangEditor 支持多个编辑器共存，正常创建即可

<div id="toolbar-container-1"></div>
<div id="editor-container-1"></div><hr><div id="toolbar-container-2"></div>
<div id="editor-container-2"></div>

// 创建编辑器1
const editor1 = createEditor({selector: '#editor-container-1',content: [],mode: 'default'
})
// 创建工具栏1
const toolbar1 = createToolbar({editor: editor1,selector: '#toolbar-container-1',mode: 'default'
})// 创建编辑器2
const editor2 = createEditor({selector: '#editor-container-2',content: [],mode: 'simple'
})
// 创建工具栏2
const toolbar2 = createToolbar({editor: editor2,selector: '#toolbar-container-2',mode: 'simple'
})

或者采用组件引用的方式。编辑器的id一定不能相同

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {components: { Editor, Toolbar },setup() {const editorId = 'editor' //【注意】编辑器 id ，要全局唯一const editorId2 = 'editor2'const defaultContent = ref([])const defaultSecretContent = ref([])const isEditorShow = ref(false)const isEditorSecretShow = ref(false)const getDefaultContent = computed(() => { return cloneDeep(defaultContent.value)})const getDefaultSecretContent = computed(() => {return cloneDeep(defaultSecretContent.value)})}
}

<div v-if="isEditorShow" style="border: 1px solid #ccc"><Toolbar:editorId="editorId":defaultConfig="toolbarConfig":mode="mode"style="border-bottom: 1px solid #ccc"/><Editor:editorId="editorId":defaultConfig="editorConfig":defaultContent="getDefaultContent":mode="mode"style="height: 500px"/></div>
<div v-if="isEditorSecretShow" style="border: 1px solid #ccc"><Toolbar:editorId="editorId2":defaultConfig="toolbarConfig":mode="mode"style="border-bottom: 1px solid #ccc"/><Editor:editorId="editorId2":defaultConfig="editorConfig":defaultContent="getDefaultSecretContent":mode="mode"style="height: 500px"/></div>

上述的多个编辑器功能，使用的方法和一个编辑器的相同。

6、富文本中上传图片到oss，并显示

wangeditor支持自定义上传图片（远程服务器）

需要在editorConfig中通过customUpload方法上传。可见官方文档

https://www.wangeditor.com/v5/guide/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD

const customUpload = async (file, insertFn) => {const fileName = createNewFileName(file.name)const result = await ossUpload({ //此处为自行封装的oss上传方法type: 'image',fileName,file: file})insertFn(result.url)}const editorConfig = {MENU_CONF: {uploadImage: {customUpload}}}