最近使用vue-quill-editor,发现字体加粗、斜体、颜色都失效了,排查并没有样式冲突。
后来发现是由于处理粘贴内容的时候,处理insert的时候把样式去除了
clipboard: {
// 粘贴版,处理粘贴时候带图片
matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
},
handleCustomMatcher(node, Delta) { // 处理粘贴图片大小问题
let ops = []
for(let i = 0; i < Delta.ops.length; i++){
let op = Delta.ops[i]
if (op.insert.image && isBase64(op.insert.image)) {
// 判断图片大小
let file = base64toFile(op.insert.image)
// 判断图片大小
if(this.beforeAvatarUpload(file)){
ops.push({
insert: op.insert,
})
}else{
ops.push({
insert: '',
})
}
// this.$message.warning('不允许粘贴图片,请手动上传')
// this.dealClipImage(op)
} else {
ops.push({
insert: op.insert,
})
}
}
Delta.ops = ops
return Delta
},
改成下面就可以了
handleCustomMatcher(node, Delta) {
let ops = []
for(let i = 0; i < Delta.ops.length; i++){
let op = Delta.ops[i]
if (op.insert.image && isBase64(op.insert.image)) {
// 判断图片大小
let file = base64toFile(op.insert.image)
// 判断图片大小
if(this.beforeAvatarUpload(file)){
ops.push({
// insert: op.insert,
...op
})
}else{
ops.push({
insert: '',
})
}
// this.$message.warning('不允许粘贴图片,请手动上传')
// this.dealClipImage(op)
} else {
ops.push({
// insert: op.insert,
...op
})
}
}
Delta.ops = ops
return Delta
},