前言：已组件化，引入即可使用，包含本地图片上传可拖拽大小。效果图如下：附源码
1.首先老规矩，引入下面两个包
npm i @wangeditor/editor --savenpm i @wangeditor/editor-for-vue --save
2.上源码不墨迹，当前wangEditor组件已完成基本功能封装，及本地图片上传：/components/my-editor/index.vue
<template><div class="my-editor-cpt"><div style="border: 1px solid #ccc;"><!-- 工具栏 --><Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" /><!-- 编辑器 --><Editor style="height: 500px; overflow-y: hidden" :defaultConfig="editorConfig" v-model="html"@onChange="onChange" @onCreated="onCreated" /></div></div></template><script>import {DomEditor} from '@wangeditor/editor'import {Editor,Toolbar} from '@wangeditor/editor-for-vue'export default {name: 'my-editor',props: {'value': {default: ''}},components: {Editor,Toolbar},data() {return {editor: null,html: '',toolbarConfig: {// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],excludeKeys: [ /* 隐藏哪些菜单 */// 'group-more-style','blockquote', // 引用'code', // ···更多-行内代码'clearStyle', // ···更多-清除格式'todo', // 代办'emotion', // 表情// 'insertTable',// 表格'codeBlock' // 代码块]},editorConfig: {placeholder: '请输入内容...',// autoFocus: false,// 所有的菜单配置，都要在 MENU_CONF 属性下MENU_CONF: {//本地上传图片配置uploadImage: {// server: this.$api.uploadFile, // 上传图片地址// timeout: 20 * 1000, // 5s// fieldName: 'custom-fileName',// meta: {// token: 'xxx',// a: 100// },// metaWithUrl: true, // 参数拼接到 url 上// headers: {// Accept: 'text/x-json'// },// maxFileSize: 10 * 1024 * 1024, // 10M// base64LimitSize: 5 * 1024, // 5kb 以下插入 base64// onBeforeUpload(files) {// console.log('onBeforeUpload', files)// return files // 返回哪些文件可以上传// // return false 会阻止上传// },// onProgress(progress) {// console.log('onProgress', progress)// },// onSuccess(file, res) {// console.log('onSuccess', file, res)// },// onFailed(file, res) {// alert(res.message)// console.log('onFailed', file, res)// },// onError(file, err, res) {// alert(err.message)// console.error('onError', file, err, res)// },// // 用户自定义插入图片// customInsert(res, insertFn) {// console.log('customInsert', res)// const imgInfo = res.data[0] || {}// const { url, alt, href } = imgInfo// if (!url) throw new Error(`Image url is empty`)// // 自己插入图片// console.log('自己插入图片', url)// insertFn(url, alt, href)// },// 用户自定义上传图片customUpload(file, insertFn) {console.log('customUpload', file)//模拟调用自己上传接口return new Promise((resolve) => {// 插入一张图片，模拟异步setTimeout(() => {const src = `/img/flexible/logo/pc/result@2.png?r=${Math.random()}`insertFn(src, '百度 logo', src)resolve('ok')}, 2000)})},// // 自定义选择图片（如图床）// customBrowseAndUpload(insertFn) {// alert('自定义选择图片，如弹出图床')// // 插入一张图片，模拟异步// setTimeout(() => {//const src = '/img/flexible/logo/pc/result@2.png'//insertFn(src, '百度 logo', src) // 插入图片// }, 500)// },}}}}},methods: {onCreated(editor) {this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错},onChange(editor) {console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容const toolbar = DomEditor.getToolbar(editor)const curToolbarConfig = toolbar.getConfig()console.log('toolbarKeys', curToolbarConfig.toolbarKeys) // 当前菜单排序和分组},// 获取当前文本内容方法getEditorText() {const editor = this.editorif (editor == null) return// console.log(editor.getText()); // 执行 editor APIreturn editor.getText()},// 获取当前Html文本字符串getEditorHtml() {const editor = this.editorif (!editor) return// console.log(editor.getHtml()); // 执行 editor APIreturn editor.getHtml()}},mounted() {this.$nextTick(_ => {// 插入htmlthis.html = this.value})// 模拟 ajax 请求，异步渲染编辑器// setTimeout(() => {// this.html = "<p>Ajax 异步设置内容 HTML</p>";// }, 1500);},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！}}</script><style src="@wangeditor/editor/dist/css/style.css"></style><style>.my-editor-cpt {width: 100%;padding: 0 5px;box-sizing: border-box;}div[data-slate-editor]::after {content: '';display: block;height: 1px;width: 100%;}.w-e-full-screen-container {z-index: 9999;}</style>
3.在需要使用的地方引入上步组件：import theEditor from '@/components/my-editor'
<!-- htmlValue 传入组件的Html字符串 --><the-editor ref="my-editor" :value="htmlValue"></the-editor>
// 提交获取富文本submit() {let params = {} // 请求入参let editorHtml = that.$refs['my-editor'].getEditorHtml() //获取富文本html字符串params.value = editorHtmllet editorText = that.$refs['my-editor'].getEditorText() //获取富文本输入if (!editorText) {return reject({content: '请输入'})}}
