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>