Vue + vue-quill-editor富文本禁止粘贴图片
项目中粘贴图片过大 富文本内容上传后台服务器上传不到。解决办法:不允许粘贴图片//添加匹粘贴板事件handleCustomMatcher(node, Delta) {let ops = []Delta.ops.forEach(op => {if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片,这里会是一个对象,
·
项目中粘贴图片过大 富文本内容上传后台服务器上传不到。
解决办法:
不允许粘贴图片
//添加匹粘贴板事件
handleCustomMatcher(node, Delta) {
let ops = []
Delta.ops.forEach(op => {
if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片,这里会是一个对象,所以可以这样处理
ops.push({
insert: op.insert,
})
}else{
this.$message({
message:'不允许粘贴图片,请手动上传',
type:'warning'
})
}
})
Delta.ops = ops
return Delta
},
//quill 富文本配置
editorOption: {
placeholder: '',//
modules:{
clipboard: {
// 粘贴版,处理粘贴时候带图片
matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
},
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
['blockquote'], //引用,代码块
[{ 'header': 1 }, { 'header': 2 }], // 标题,键值对的形式;1、2表示字体大小
[{ 'list': 'ordered'}, { 'list': 'bullet' }], //列表
[{ 'script': 'sub'}, { 'script': 'super' }], // 上下标
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], //几级标题
[{ 'color': [] }, { 'background': [] }], // 字体颜色,字体背景颜色
['image'] //上传图片、上传视频
],
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false);
}
}
}
}
},
theme:'snow'
},
更多推荐
已为社区贡献1条内容
所有评论(0)