Vue2使用wangeditor5-next上传图片、视频，默认给图片、视频加上宽度

wangeditor5-next

wangeditor5-next是由wangeditor5（已停止维护）社区自发维护的下一个版本
官网：wangeditor5-next

安装：

yarn add @wangeditor-next/editor-for-vue2
# 或者 npm install @wangeditor-next/editor-for-vue2 --save

自定义上传图片与视频

上传图片配置：点击这里
上传视频配置：点击这里

讲解

在 customInsert 自定义插入函数当中新建一个节点并设置好默认样式，再由传进来的editor实例进行创建，返回整个默认配置对象，与props传进来的对象进行合并，本项目用了 lodash 的 merge方法进行合并，再由计算属性将合并后的对象返回Editor实例

模板

    <div style="width: 100%; border: 1px solid #ccc; box-sizing: border-box">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        class="Editor"
        :style="{ height: height + 'px' }"
        v-model="value"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
        @onChange="onChange"
      />
    </div>

导入

import { Editor, Toolbar } from "@wangeditor-next/editor-for-vue2";
import { merge } from "lodash";
import { defaultFun } from "./config";

Vue代码

 props: {
    // 获取HTML内容
    html: String,
    // 获取纯文本内容
    text: String,
    //配置项
    config: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  computed: {
    // 合并配置
    editorConfig() {
      let defaultConfig = defaultFun(this.editor);
      return merge(defaultConfig, this.config);
    },
  },

默认配置对象

import { getToken } from "@/util/auth";
let tempEditor = null;
export const defaultFun = (editor) => {
  tempEditor = editor;
  // 菜单配置
  return {
    MENU_CONF: {
      // 图片上传
      uploadImage: {
        server: "/api/blade-resource/fileSystem/fileUpload",
        fieldName: "file",
        // 单个文件的最大体积限制，默认为 2M
        maxFileSize: 10 * 1024 * 1024, // 10M
        // 最多可上传几个文件，默认为 100
        maxNumberOfFiles: 10,
        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        // allowedFileTypes: ['image/*'],
        allowedFileTypes: ["image/png,image/jpeg,image/jpg"],
        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
        meta: {
          // token: 'xxx',
          // otherKey: 'yyy'
          // file:''
        },
        // 将 meta 拼接到 url 参数中，默认 false
        metaWithUrl: false,
        // 自定义增加 http  header
        headers: {
          "Blade-Auth": `bearer ${getToken()}`,
        },
        // 跨域是否传递 cookie ，默认为 false
        withCredentials: true,
        // 超时时间，默认为 10 秒
        timeout: 30 * 1000, //10 秒
        // 上传之前触发
        onBeforeUpload(file) {
          return file;
        },
        // 自定义插入图片
        customInsert(res, insertFn) {
          const { domain, name, link } = res.data;
          // 给图片加上默认宽度
          const imageNode = {
            type: "image",
            src: domain,
            href: domain,
            alt: name,
            width: "",
            height: "",
            style: {
              width: "50%",
            },
            // 其他属性 ...
            children: [{ text: "" }], // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！
          };
          tempEditor.insertNode(imageNode);
        },
      },
      // 视频上传
      uploadVideo: {
        fieldName: "file",
        server: "/api/blade-resource/fileSystem/fileUpload",
        // 单个文件的最大体积限制，默认为 10M
        maxFileSize: 50 * 1024 * 1024, // 50M
        // 最多可上传几个文件，默认为 5
        maxNumberOfFiles: 5,
        // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ["video/*"],
        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
        meta: {
          // token: 'xxx',
          // otherKey: 'yyy'
        },
        // 将 meta 拼接到 url 参数中，默认 false
        metaWithUrl: false,
        // 自定义增加 http  header
        headers: {
          // Accept: 'text/x-json',
          // otherKey: 'xxx'
          "Blade-Auth": `bearer ${getToken()}`,
        },
        // 跨域是否传递 cookie ，默认为 false
        withCredentials: true,
        // 超时时间，默认为 30 秒
        timeout: 1000 * 1000, // 1000 秒,
        customInsert(res, insertFn) {
          const { domain, name, link } = res.data;
          // 给视频加上默认宽度
          const videoNode = {
            type: "video",
            src: domain,
            poster: domain,
            width: "",
            height: "",
            style: {
              width: "50%",
              height: "50%",
            },
            // 其他属性 ...
            children: [{ text: "" }], // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！
          };
          tempEditor.insertNode(videoNode);
        },
      },
    },
  };
};