wangeditor富文本上传图片等配置

1、首先安装插件
vue版本时vue2，我使用的时第一个，使用第二个安装插件在我的项目中会有问题

然后根据官网提供模板的直接复制下来就行
官网地址：https://www.wangeditor.com/v5/for-frame.html#配置
整晚这些就获得了一个富文本模板
2、配置上传图片
a、本地上传
在data中配置，看加粗部分

  data() {
    return {
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        //看这里
        //-----------------------------------
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
          
          //server必须要配置正确
            server: env.pross "/upload/postfile",

            maxFileSize: 4 * 1024 * 1024, // 1M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: [],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            fieldName: "file",
            meta: {
            //官网中把token放到了这里，但是请求的时候会看不到token
            },
            headers: {
            //所以token放这里
              token: window.sessionStorage.token,
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: false,
            // 超时时间，默认为 10 秒
            timeout: 5 * 1000, // 5 秒
            customInsert(res, insertFn) {
              // JS 语法
              // res 即服务端的返回结果
              // 从 res 中找到 url alt href ，然后插图图片
              insertFn(res.data);
            },
          },
        },
      },
      mode: "default", // or 'simple'
    };
    //--------------------------------------------
  },

注意两点：1、server必须写
2、token放到headers中

这篇好文章是转载于：学新通技术网