} else {
this.quill.format('image', false)
}
},
},
},
},
placeholder: '',
},
}
},
computed: {},
async mounted() {},
methods: {
handleAvatarSuccess(res, file) {
// 图片上传成功后的回调
console.log(res, file)
},
beforeAvatarUpload(data) {
// 思路：上传图片至服务后，拿到返回的图片地址。直接创建image标签插入光标所在的位置
// 图片上传服务(本地服务或者阿里云服务)
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill
// 上传服务成功后，按根据光标位置把图片插入编辑器中
if (data.url) {
// 获取光标所在位置,data.url表示上传服务后返回的图片地址
let length = quill.getSelection().index
// 插入图片，data.url为服务返回的图片链接地址
quill.insertEmbed(length, 'image', data.url)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
this.$message.closeAll()
this.$message.error('图片插入失败')
}
},
handelEditorChange(el) {
console.log(el, 'el')
},
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
},
},
}
</script>
<style scoped lang="scss">
#quillEditorId {
.avatarUploader {
display: none; // 隐藏上传图片组件
}
}
</style>
总结：
1、变量toolbarOptions表示自定义的工具栏，可以参照官网(官网写的比较简单)或者细看本文代码(有详细注释)；
2、如果不单独处理图片，图片会被直接转义成base64，跟随DOM一块儿上传服务；
3、本文对图片做了自定义处理，选择本地图片时，会单独上传到服务，返回地址后，直接插入到富文本编辑中的当前节点。看代码中editorOption的handlers的image函数，以及插入富文本编辑器当前光标函数beforeAvatarUpload，代码中有详细注释；
4、粘贴板，变量clipboard。如果需要清理复制的自带样式，使用粘贴板进行清理，函数HandleCustomMatcher；
5、对于复制粘贴的情况，多说一句。过程中，编辑器已经将原有的DOM转为编辑器允许存在的DOM元素，所以这块儿不用再处理(处理起来，也会有点复杂)。
到此这篇关于Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的文章就介绍到这了,更多相关vue富文本编辑器Vue-Quill-Editor内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
