问题描述:富文本框复制粘贴未走上传图片接口,会将复制的图片解析为base64编码,为了控制这种情况可选择禁用粘贴图片,或者监听有复制粘贴的图片走上传图片接口
-
获取到
quill
对象,可以通过refs
或者Quill
对象的getInstance()
方法获取。 -
注册
paste
事件处理函数,通过事件对象的clipboardData
属性获取剪切板中的内容,判断是否存在图片,如果存在则阻止默认行为。 -
最后在组件销毁时需要记得解除事件处理函数。
<template><div><quill-editorref="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>