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【vue-quill-editor 粘贴图片】}
