vue-quill-editor不允许粘贴图⽚但允许粘贴带背景⾊及颜⾊的⽂字
vue-quill-editor 不允许粘贴图⽚但允许粘贴带背景⾊及颜⾊的⽂字
vue-quill-editor 富⽂本编辑器
今天被问到⼀个问题，拿来分享⼀下，⽹上有很多vue-quill-editor富⽂本编辑器不允许粘贴图⽚的解决⽅案，但基本上都⼀并不允许粘贴⽂字的背景⾊及⽂字颜⾊，下⾯将解决这个问题。
vue-quill-editor 如何禁⽌粘贴图⽚
data(){
return{
imageUrl:'',
editeContent:'',
editorOption:{
modules:{
clipboard:{
// 粘贴版，处理粘贴时候的⾃带样式
matchers:[[Node.ELEMENT_NODE,this.HandleCustomMatcher]],
},
toolbar:{
container: toolbarOptions,// ⼯具栏
handlers:{
image:function(value){
if(value){
// 获取隐藏的上传图⽚的class，不⼀定是.el-icon-plus。触发上传图⽚事件
document.querySelector('.el-icon-plus').click()
}else{
this.quill.format('image',false)
}
},
},
},
},
placeholder:'',
},
}
},
上⾯代码划重点：
clipboard:{
// 粘贴版，处理粘贴时候的⾃带样式
matchers:[[Node.ELEMENT_NODE,this.HandleCustomMatcher]],
},
⽅法代码：
// 添加匹粘贴板事件禁⽌图⽚粘贴
优秀的富文本编辑器
handleCustomMatcher(node, Delta){
console.log(Delta)
const ops =[]
Delta.ops.forEach(op =>{
if(op.insert &&typeof op.insert ==='string'){// 如果粘贴了图⽚，这⾥会是⼀个对象，所以可以这样处理
ops.push({
insert: op.insert  // ⽂字内容
})
}else{
alert('不允许粘贴图⽚')
}
})
Delta.ops = ops
return Delta
}
vue-quill-editor 如何怎样允许或者粘贴⽂字样式
以上代码完美的禁⽌了富⽂本编辑器粘贴图⽚，但也⼀并把粘贴的⽂字的样式去掉了，其实只要加⼀句话就解决了，下⾯是代码：// 添加匹粘贴板事件禁⽌图⽚粘贴
handleCustomMatcher(node, Delta){
const ops =[]
Delta.ops.forEach(op =>{
console.log(op)
if(op.insert &&typeof op.insert ==='string'){// 如果粘贴了图⽚，这⾥会是⼀个对象，所以可以这样处理
ops.push({
insert: op.insert,// ⽂字内容
attributes: op.attributes  //⽂字样式（包括背景⾊和⽂字颜⾊等）
})
}else{
alert('不允许粘贴图⽚')
}
})
Delta.ops = ops
return Delta
}
上⾯代码划重点：
attributes: op.attributes  //⽂字样式（包括背景⾊和⽂字颜⾊等）
以上是本⽂章全部内容，撒花。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。