vue-quill-editor 图文粘贴 图片不显示

在使用`vue-quill-editor`进行图文粘贴时，复制的图片实际上以base64的形式进行上传。然而，将base64写进数据库并不是一个好的做法。因此，解决思路是将复制的图片上传至服务器，然后将服务器返回的图片地址作为img标签插入到富文本编辑器中，这样就可以正确显示图片了。以下是一个解决思路的代码实例供参考：

mounted() {
  let quill = this.$refs.myQuillEditor.quill;
  
  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) => {
            if (res.data.code == 200) {
              let quill = this.$refs.myQuillEditor.quill;
              let length = quill.getSelection().index;
              
              quill.insertEmbed(length, "image", res.data.data);
              quill.setSelection(length + 1);
            }
          })
          .catch((err) => {
            console.error(err);
          });
      });
    }
  }, false);
},

通过这段代码，你可以在`vue-quill-editor`中实现图文粘贴图片并正确显示图片。需要注意的是，你需要根据你自己的项目做一些适应性的调整。希望这能帮到你！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue-quill-editor粘贴图片，vue-quill-editor复制图片](https://blog.csdn.net/weixin_43131046/article/details/116490735)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]