vue-quill-editor 粘贴图片

//富文本编辑器
import { container, quillEditor, Quill } from "vue-quill-editor";
// 粘贴图片上传
import {ImageExtend} from 'quill-image-paste-module'
Quill.register('modules/ImageExtend', ImageExtend)

// 配置项
editorOption:{
placeholder: '',

theme: 'snow',  // 主题
modules: {
    toolbar: {
        container: container,  // 工具栏选项
        handlers: handlers  // 事件重写
    },
    clipboard: {
        // 粘贴过滤
        matchers: [[Node.ELEMENT_NODE, HandleCustomMatcher]]
    },
    ImageExtend: {
        loading: true,
        name: 'imageFile',
        action: '/api/cms/share/uploadCopyFile',
        response: (res) => {
            return res.data.url;
        }
    }
}

}
function HandleCustomMatcher (node, Delta) {

// 文字，从别处复制而来，清除自带样式，转为纯文本
let ops = []
Delta.ops.forEach(op => {
  if (op.insert && typeof op.insert === 'string') {
    ops.push({
      insert: op.insert
    })
  }
})
Delta.ops = ops
return Delta

}
这种方式只适用于新增，编辑的时候，初始值中的图片会被过滤掉，导致图片无法展现
修复HandleCustomMatcher后即可
function HandleCustomMatcher (node, Delta) {

// 文字，从别处复制而来，清除自带样式，转为纯文本
if(node.src && node.src.indexOf('data:image/png') > -1){
    Delta.ops = [];
    return Delta;
}
let ops = []
Delta.ops.forEach(op => {
  if (op.insert && typeof op.insert === 'string') {
    ops.push({
      insert: op.insert
    })
  }else if(op.insert && typeof op.insert.image === 'string'){
    ops.push({
        insert: op.insert
    })
  }
})
Delta.ops = ops
return Delta

}