vue-quill-editor复制图片实际上会以:base64形式的进行一个上传,base64写进数据库那不是gg。

解决思路: 将复制的图片上传至服务器,将服务器返回的图片地址作为img标签插入富文本编辑器中。
此功能是在已有功能上的增加用户体验,基础构建代码请看这里

代码(vue项目):

 mounted() {
    //  自定义粘贴图片功能
    let quill = this.$refs.myQuillEditor.quill;
    this.$forceUpdate();
    quill.root.addEventListener(
      "paste",
      (evt) => {
        if (
          evt.clipboardData &&
          evt.clipboardData.files &&
          evt.clipboardData.files.length
        ) {
          evt.preventDefault();
          [].forEach.call(evt.clipboardData.files, (file) => {
            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
              return;
            }
            const formData = new FormData();
            formData.append("pictureFile", file);
            makdwnImg(formData)
              .then((res) => {
                let quill = this.$refs.myQuillEditor.quill;
                if (res.data.code == 200) {
                  // const formdata = _.extend({}, this.formdata)
                  let length = quill.getSelection().index; //光标位置
                  // 插入图片  图片地址
                  quill.insertEmbed(length, "image", res.data.data);
                  // 调整光标到最后
                  quill.setSelection(length + 1); //光标后移一位
                }
              })
              .catch((err) => {
                console.error(err);
              });
          });
        }
      },
      false
    );
  },
Logo

前往低代码交流专区

更多推荐