关于前端: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 = opsreturn 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 = opsreturn Delta

}