wangEditor-v5使用

66 阅读 0 评论 44 点赞

我是靠谱客的博主聪慧纸鹤，最近开发中收集的这篇文章主要介绍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) return
setTimeout(() => { //此处最好异步处理，否则销毁编辑器可能会报错
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
}
}
}