wangEditor5在vue中自定义菜单，取消网络图片和插入视频，上传图片，视频功能
参考博客：wangEditor5在vue中自定义菜单栏--格式刷，上传图片，视频功能_wangeditor自定义菜单-CSDN博客
1.安装插件
npm install @wangeditor/editor
npm install @wangeditor/editor-for-vue2.富文本组件richText.vue
<template><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 300px; overflow-y: hidden"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="onCreated"@onChange="onChange"/></div>
</template>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { Message } from "element-ui";
export default Vue.extend({components: { Editor, Toolbar },props: {currentHtml: {type: String,default: "",},currentTitle: {type: String,default: "",},},data() {return {editor: null,html: this.currentHtml,// toolbarConfig: {},toolbarConfig: {//去掉网络上传图片和插入视频excludeKeys: ["insertImage", "insertVideo"],},mode: "default", // or 'simple'editorConfig: {readOnly: this.currentTitle == "查看信息" ? true : false,placeholder: "请输入内容...",// 所有的菜单配置，都要在 MENU_CONF 属性下MENU_CONF: {// 图片上传uploadImage: {// server: "http://10.7.40.178:10176/sso-management/common/upload",server: process.env.API_ROOT + "/sso-management/common/upload",fieldName: "file",// 单个文件的最大体积限制，默认为 2MmaxFileSize: 10 * 1024 * 1024, // 10M// 最多可上传几个文件，默认为 100maxNumberOfFiles: 10,// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []allowedFileTypes: ["image/*"],// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。meta: {// token: 'xxx',// otherKey: 'yyy'// file:''},// 将 meta 拼接到 url 参数中，默认 falsemetaWithUrl: false,// 自定义增加 http headerheaders: {"SSO-Authorization": sessionStorage.getItem("Authorization"),// Accept: 'text/x-json',// otherKey: 'xxx'},withCredentials: false, // 跨域是否传递 cookie ，默认为 falsetimeout: 10 * 1000, // 超时时间，默认为 10 秒// 上传前onBeforeUpload(files) {Message({message: "图片正在上传中,请耐心等待",duration: 0,customClass: "uploadTip",iconClass: "el-icon-loading",showClose: true,});return files;},// 自定义插入图片customInsert(res, insertFn) {// 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理// 先关闭等待的MessageMessage.closeAll();if (res.code == 200) {Message.success({// message: `${res.data.name} 上传成功`,message: `上传成功`,});} else {Message.error({message: `上传失败，请重新尝试`,});}insertFn(res.url, res.newFileName, res.url);},// 单个文件上传成功之后onSuccess(file, res) {console.log(`上传成功`, res, file);},// 单个文件上传失败onFailed(file, res) {// console.log(`${file.name} 上传失败`, res);console.log(`上传失败`, res);},// 上传进度的回调函数onProgress(progress) {console.log("progress", progress);// progress 是 0-100 的数字},// 上传错误，或者触发 timeout 超时onError(file, err, res) {console.log(`${file.name} 上传出错`, err, res);},},//视频上传uploadVideo: {fieldName: "file",server: process.env.API_ROOT + "/sso-management/common/upload",// 单个文件的最大体积限制，默认为 10MmaxFileSize: 50 * 1024 * 1024, // 50M// 最多可上传几个文件，默认为 5maxNumberOfFiles: 3,// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []allowedFileTypes: ["video/*"],// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。meta: {// token: 'xxx',// otherKey: 'yyy'},// 将 meta 拼接到 url 参数中，默认 falsemetaWithUrl: false,// 自定义增加 http headerheaders: {"SSO-Authorization": sessionStorage.getItem("Authorization"),// Accept: 'text/x-json',// otherKey: 'xxx'},// 跨域是否传递 cookie ，默认为 falsewithCredentials: false,// 超时时间，默认为 30 秒timeout: 1000 * 1000, // 1000 秒,// 上传之前触发onBeforeUpload(file) {Message({message: "视频正在上传中,请耐心等待",duration: 0,customClass: "uploadTip",iconClass: "el-icon-loading",showClose: true,});return file;},// 自定义插入视频customInsert(res, insertFn) {// 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理// 先关闭等待的MessageMessage.closeAll();if (res.code == 200) {Message.success({// message: `${res.data.name} 上传成功`,message: `上传成功`,});} else {Message.error({message: `上传失败，请重新尝试`,});}insertFn(res.url, res.newFileName, res.url);},// 上传进度的回调函数onProgress(progress) {console.log(progress);// onProgress(progress) { // JS 语法// progress 是 0-100 的数字},// 单个文件上传成功之后onSuccess(file, res) {console.log(`上传成功`, res);// this.successMsg(file);},// 单个文件上传失败onFailed(file, res) {console.log(`上传失败`, res);// this.errorMsg(file);},// 上传错误，或者触发 timeout 超时onError(file, err, res) {// console.log(`${file.name} 上传出错`, err, res);Notification.error({title: "错误",message: `上传失败，请重新尝试`,});},},},},};},methods: {onCreated(editor) {this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错},onChange(editor) {this.$emit("richContent", editor.getHtml());console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容},},mounted() {// 模拟 ajax 请求，异步渲染编辑器// setTimeout(() => {// this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";// }, 1500);},beforeDestroy() {const editor = this.editor;if (editor == null) return;editor.destroy(); // 组件销毁时，及时销毁编辑器},
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>3.页面引用效果
import richText from "@/components/richText.vue";components: { richText },<richTextv-if="formAlgin.noticeType == 0"@richContent="richContent":currentHtml="formAlgin.noticeContent":currentTitle="currentTitle"></richText>