网站建设与网页设计,电子产品外观设计,新建文档怎么做网站,雷诺网站群建设问题描述#xff1a;富文本框复制粘贴未走上传图片接口#xff0c;会将复制的图片解析为base64编码#xff0c;为了控制这种情况可选择禁用粘贴图片#xff0c;或者监听有复制粘贴的图片走上传图片接口 获取到 quill 对象#xff0c;可以通过 refs 或者 Quill 对象的 getI…问题描述富文本框复制粘贴未走上传图片接口会将复制的图片解析为base64编码为了控制这种情况可选择禁用粘贴图片或者监听有复制粘贴的图片走上传图片接口 获取到 quill 对象可以通过 refs 或者 Quill 对象的 getInstance() 方法获取。 注册 paste 事件处理函数通过事件对象的 clipboardData 属性获取剪切板中的内容判断是否存在图片如果存在则阻止默认行为。 最后在组件销毁时需要记得解除事件处理函数。
templatedivquill-editorrefeditorv-modelcontent:options{modules: {toolbar: [[bold, italic, underline, strike], [link, image, video]]},placeholder: 请输入内容...,}/quill-editor/div
/templatescript
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
