wang editor Vue使用 + 使用自己方法上传图片

首先附上wang editor的

npm地址 : https://www.npmjs.com/package/vue-wangeditor

使用手册 : https://www.kancloud.cn/wangfupeng/wangeditor3/332599  

建议详看使用手册,所有你需要的东西,他都有写到

1. cnpm下载并引用(不再赘述)

2. 在mounted中进行配置:

const editor = new WangEditor("#demo1");
    // 配置 onchange 回调函数，将数据同步到 vue 中
editor.config.onchange = (newHtml) => {
     this.editorData = newHtml;
     this.$emit("change", { val: this.editorData });
};

editor的所有参数以及方法,都存放于editor.config中,可以自己打印看看

editor.config.height = 200; //设定高度
editor.config.zIndex = 500; //设定zIndex

3. 编辑器使用自己的图片上传方法(如果使用编辑器自己的上传方法 ,请参考其他文章中关于设置请求头等内容)

隐藏编辑器插入网络图片
editor.config.showLinkImg = false;



let that = this; // this指向提前设定好
    editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
      // resultFiles 是 input 中选中的文件列表
      // insertImgFn 是获取图片 url 后，插入到编辑器的方法

      // 这里可以判断图片的大小以及格式
      let data = resultFiles[0];
      if (data.size > 2 * 1024 * 1024) {
        that.$message.error("上传图片不能超过2MB!");
        return false;
      }
      const isJpgOrPng = /jpg|png|jpeg|gif|wmf|svg|tiff/.test(data.type);
      if (!isJpgOrPng) {
        that.$message.error("请上传图片!");
        return false;
      }

        function (){
           // 这里就是你自己上传图片的方法
           // 上传图片，返回结果，将图片插入到编辑器中
            insertImgFn(returnUrl);
        }  
      
    };

4.  图片上传有alert提示: 某图片大小超出5M ? 

其实是编辑器的默认设置大小没有超出5M, 我们可以给他的图片大小设置大一点,这样,只用我们自己的大小校验就可以了

// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024

我这里为了不影响自己的大小判断, 设置成了100000000   --!

5. 创建完成 ,生成

    // 创建编辑器
    editor.create();
    editor.txt.html(this.content);
    // 初始化
    this.editor = editor;

6.销毁编辑器

    this.editor.destroy();
    this.editor = null;