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: '', // 你的上传url
			fieldName: 'file',
			allowedFileTypes: ['image/*'],
			async customUpload(file, insertFn) {
				const form = new FormData()
                form.append('file', file)
                // 你可以在此增加formdata
                const { data } = await axios.post(' your url'), form)
                const url = data.url
                insertFn(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.url
                insertFn(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.url
                            insertFn(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.url
                insertFn(file.name,url)
            } catch (e) {
                this.$message.error('上传出错')
            }
        }
    }
}
</script>