关于前端:vuequilleditor-粘贴图片

// 富文本编辑器
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

}