https://www.wangeditor.com/v5

一、安装

首先安装editor

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --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

二、复制样式

安装完成后，复制 node_modules/@wangeditor/core/dist/css/style.css 文件到src/assets/wangeditor路径下，在main.js 用

import '@wangeditor/editor/dist/css/style.css'

webpack或者Vite可以直接根据此解析路径，即可加载了。

也可以局部引入：
在组件/页面内

import '@wangeditor/editor/dist/css/style.css'

三、封装组件

1.模板内引入工具栏和编辑框：

<template><div style="border: 1px solid #ccc;"><Toolbar ref="toolbar" style="border-bottom: 1px solid #ccc;" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /><Editor style="height: 300px;width: 80%; overflow-y: hidden;" :value="value":defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="onEditorChange" /></div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
</script>

2.配置工具栏

因为我需要上传附件的按钮，所以先下载附件：

yarn add @wangeditor/plugin-upload-attachment
# npm install @wangeditor/plugin-upload-attachment --save

下载好了之后引入并注册：
（只注册一次，在组件上方）

import { Boot } from '@wangeditor/editor'
import attachmentModule from '@wangeditor/plugin-upload-attachment'
Boot.registerModule(attachmentModule)

后面配置工具栏toolbarConfig：
excludeKeys写不想要的工具项，insertKeys写自定义插入的项，mode设置成default即有20+个常用工具项，在此基础上修改即可。

toolbarConfig:{excludeKeys: ['fullScreen',"group-video"],insertKeys:{index: 0, // 自定义插入的位置keys: ['uploadAttachment'], // “上传附件”菜单}
} ,

3.配置editor

工具栏是基于editor来的，所以最开始的时候editor为null，后面在editor的created钩子里初始化：

methods:{
onCreated(editor) {this.editor = Object.seal(editor)
},
}

记得销毁：

    beforeDestroy() {this.editor && this.editor.destroy()},

editorConfig: { hoverbarKeys: {attachment: {menuKeys: ['downloadAttachment'], // “下载附件”菜单},},MENU_CONF: {uploadImage: {server: '', // 你的上传urlfieldName: 'file',allowedFileTypes: ['image/*'],async customUpload(file, insertFn) {const form = new FormData()form.append('file', file)// 你可以在此增加formdataconst { data } = await axios.post(' your url'), form)const url = data.urlinsertFn(url, '', '') // 参数：src、alt、href 用来在编辑框中战术}},uploadAttachment: {server: 'url',fieldName: 'file',timeout: 10 * 1000,// 自定义上传customUpload: this.uploadAttachment},}
},async uploadAttachment (file, insertFn) {const form = new FormData()form.append('file', file)try {const { data } = await axios.post('url', form)const url = data.urlinsertFn(file.name,url)} catch (e) {this.$message.error('上传出错')}}

四、代码汇总

<template><div style="border: 1px solid #ccc;"><Toolbar ref="toolbar" style="border-bottom: 1px solid #ccc;" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /><Editor style="height: 300px;width: 80%; overflow-y: hidden;" :value="value":defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="onEditorChange" /></div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { Boot } from '@wangeditor/editor'
import axios from 'axios'
import attachmentModule from '@wangeditor/plugin-upload-attachment'Boot.registerModule(attachmentModule)export default {name:'WEditor',components:{Editor, Toolbar},props:{value:{type:String,default:''}},data(){return {toolbarConfig:{excludeKeys: ['fullScreen',"group-video"],insertKeys:{index: 0, // 自定义插入的位置keys: ['uploadAttachment'], // “上传附件”菜单}} ,editor:null,editorConfig: { hoverbarKeys: {attachment: {menuKeys: ['downloadAttachment'], // “下载附件”菜单},},MENU_CONF: {uploadImage: {server: '',fieldName: 'file',allowedFileTypes: ['image/*'],async customUpload(file, insertFn) {const form = new FormData()form.append('file', file)const { data } = await axios.post('url', form)const url = data.urlinsertFn(url, '', '') // 参数：src、alt、href}},uploadAttachment: {server: 'url',fieldName: 'file',timeout: 10 * 1000,// 自定义上传customUpload: this.uploadAttachment},}},mode: 'default',}},created() {},beforeDestroy() {this.editor && this.editor.destroy()},methods:{onCreated(editor) {this.editor = Object.seal(editor)},onEditorChange(editor){this.$emit('input', editor.getHtml())},async uploadAttachment (file, insertFn) {const form = new FormData()form.append('file', file)try {const { data } = await axios.post('url', form)const url = data.urlinsertFn(file.name,url)} catch (e) {this.$message.error('上传出错')}}}
}
</script>