富文本quill 1.3.7
实现:
window.addEventListener('paste', (event) => {
if (event.clipboardData && event.clipboardData?.files && event.clipboardData.files?.length) {
// 阻止默认拷贝事件
event.preventDefault()
let curFile = event.clipboardData.files[0]
if (!this.handleBeforeUpload(curFile)) {
return
}
let formData = new FormData()
formData.append('file', curFile)
uploadFile(formData)
.then((rs) => {
let quill = this.Quill
// 光标位置
let postion = quill.selection.savedRange.index
// 将图片地址插入富文本光标后
quill.insertEmbed(postion, 'image', rs.path)
// 光标后移
quill.setSelection(postion + 1)
})
.catch((error) => {
this.$message.error('图片插入失败')
})
}
})
补充内容:
1、拷贝是触发的哪些对象的事件:window对象
打开F12,Source->右侧找到Event Listener Breakpoints
Clipboard下勾选paste等剪贴板事件,Ctrl+V时,可以进入debug

2、window添加拷贝事件后,为啥会出发两次
一次是自己定义的,一次是默认行为
需要添加:event.preventDefault(),阻止默认处理。
le.li
浙公网安备 33010602011771号