wangEditor5在vue中自定义菜单，取消网络图片和插入视频，上传图片，视频功能

参考博客：wangEditor5在vue中自定义菜单栏--格式刷，上传图片，视频功能_wangeditor自定义菜单-优快云博客

1.安装插件

npm install @wangeditor/editor
npm install @wangeditor/editor-for-vue

2.富文本组件richText.vue

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="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",
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 10 * 1024 * 1024, // 10M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ["image/*"],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
              // token: 'xxx',
              // otherKey: 'yyy'
              // file:''
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 自定义增加 http  header
            headers: {
              "SSO-Authorization": sessionStorage.getItem("Authorization"),
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },
            withCredentials: false, // 跨域是否传递 cookie ，默认为 false
            timeout: 10 * 1000, // 超时时间，默认为 10 秒
            // 上传前
            onBeforeUpload(files) {
              Message({
                message: "图片正在上传中,请耐心等待",
                duration: 0,
                customClass: "uploadTip",
                iconClass: "el-icon-loading",
                showClose: true,
              });
              return files;
            },
            // 自定义插入图片
            customInsert(res, insertFn) {
              // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
              // 先关闭等待的Message
              Message.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",
            // 单个文件的最大体积限制，默认为 10M
            maxFileSize: 50 * 1024 * 1024, // 50M
            // 最多可上传几个文件，默认为 5
            maxNumberOfFiles: 3,
            // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ["video/*"],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
              // token: 'xxx',
              // otherKey: 'yyy'
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 自定义增加 http  header
            headers: {
              "SSO-Authorization": sessionStorage.getItem("Authorization"),
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: 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回调函数不起作用,自己手动处理
              // 先关闭等待的Message
              Message.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 },

<richText
              v-if="formAlgin.noticeType == 0"
              @richContent="richContent"
              :currentHtml="formAlgin.noticeContent"
              :currentTitle="currentTitle"
            ></richText>

4.官网编辑器配置 | wangEditor