问题描述：富文本框复制粘贴未走上传图片接口，会将复制的图片解析为base64编码，为了控制这种情况可选择禁用粘贴图片，或者监听有复制粘贴的图片走上传图片接口
- 获取到
quill对象，可以通过refs或者Quill对象的getInstance()方法获取。 - 注册
paste事件处理函数，通过事件对象的clipboardData属性获取剪切板中的内容，判断是否存在图片，如果存在则阻止默认行为。 - 最后在组件销毁时需要记得解除事件处理函数。
<template>
<div>
<quill-editor
ref="editor"
v-model="content"
:options="{
modules: {
toolbar: [['bold', 'italic', 'underline', 'strike'], ['link', 'image', 'video']]
},
placeholder: '请输入内容...',
}"
></quill-editor>
</div>
</template>
<script>
import { QuillEditor } from 'vue-quill-editor';
export default {
name: 'MyComponent',
components: { QuillEditor },
data() {
return {
content: '',
quill: null
};
},
mounted() {
this.quill = this.$refs.editor.quill;
this.quill.root.addEventListener('paste', this.handlePaste, false);
},
beforeDestroy() {
this.quill.root.removeEventListener('paste', this.handlePaste, false);
},
methods: {
handlePaste(e) {
const clipboardData = e.clipboardData;
const types = clipboardData.types;
if (types.includes('Files')) {
// 禁止粘贴图片
e.preventDefault();
}
},
},
};
</script>