wangEditor3富文本

总结一下这个插件的坑

上传图片到服务器 · wangEditor3使用手册 · 看云

1.’按官网引入函数的，把 editor.customConfig 改为 editor.config 

2.然后就是工具栏部分功能失效

原因：设置的全局样式导致样式失效
解决：重新对编辑器的样式进行设置，覆盖全局即可

通过查找原始默认样式：webkit内核的默认样式
我引入是斜体功能无法实现

原因是（app.vue里面把i、b标签样式重置了）

自己在本页面局部再对编辑器进行样式设置即可

3.本地图片上传功能需要自己定义

  var that = this;
      this.editor.config.customUploadImg = async function (files, insert) {
        // var file=files[0];
        console.log(that);
        console.log(files, "file");
        //this.toast('', 'loading', true)
        let data = new FormData();
        data.append("appKey", "xxxxxx");
        data.append("needAuthn", "0");
        data.append("fileType", files[0].type);
        data.append("groupCode", "default");
        data.append("file", files[0]);
        const r = await fetch(
          "你的上传地址",
          {
            method: "POST",
            headers: {
              "x-team-id": "0",
              "x-token": that.$store.state.token,
            },
            body: data,
            mode: "cors",
          }
        );
        const res = await r.json();
        that.path = res.data.fileDownloadUrl;
        console.log(that.path, "path");
        if (res.code === "0") {
          insert(that.path + "?appKey=xxxxxx");  //将插入图片
        } else {
          console.log("图片上传失败");
        }
      };
      this.editor.config.onblur = function (newHtml) {
        content.html = newHtml;
        // this.editor.txt.html(newHtml);
        _this.$emit("get", content.html); // 获取最新的 html 内容
      };
      this.editor.create(); //创建编辑器
    },

 上传地址需要携带的参数向看后端，拿到图片URL 后插入到编辑器图片url还需要携带参数appKey

感谢一下博主提供的参考

wangEditor的一些坑记录_HYeeee的博客-CSDN博客_wangeditor斜体不生效

wangEditor3 图片上传本地服务器_weixin_34197488的博客-CSDN博客