项目中很多地方都使用富文本编辑器,富文本可以上传图片,但是,在粘贴图片时,并不能触发上传接口,而且把图片转成base64,提交保存时,就把base64保存到数据库了,这肯定会引起查询问题,查询慢或者接口超时
前端小伙伴,想让后端处理一下,后端能做但是比较麻烦,而且富文本使用的地方很多,相当于每一个保存接口,都要处理一下,这工作量就很大了,难道前端不好处理吗?
我开始百度,查询大量资料,发现解决办法还是很多的,找了一篇发给了前端小伙伴,得到的回复是,在阻止默认事件时,不生效,并没有阻止粘贴图片
案例代码
<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>
虽然,我没写过vue,但是大致能懂,设置了一个监听事件,如果粘贴的对象时文件,则阻止,前端小伙伴也是这个写的,监听事件也执行了,逻辑走到了if里,但是e.preventDefault()没有生效
我有查了大量e.preventDefault();没有生效的方案,试了,没啥作用,分析了一下原因,大致这几种
原因分析
e.preventDefault() 方法可能没有生效的原因有几个方面：
- 事件冒泡与捕获：默认情况下，addEventListener使用的是事件冒泡阶段来处理事件。如果其他地方有相同的事件监听器并且它先执行了 e.preventDefault()，那么这里的
preventDefault 可能不会被执行。 - 浏览器兼容性问题：虽然大部分现代浏览器支持 e.preventDefault()
来阻止粘贴操作，但是可能存在某些特定环境下或旧版浏览器不支持此行为。 - Quill 编辑器内部处理：Quill编辑器作为一个富文本编辑器，其内部可能对粘贴事件有自己的处理逻辑，这可能导致直接在 quill.root上添加的事件监听器无法完全控制粘贴行为
解决办法
针对上述可能的问题，可以尝试以下解决方案：
- 检查 Quill 文档：首先查看 Quill 的官方文档或源码，确认是否有更推荐的方式来阻止特定类型的粘贴操作。
- 使用 Quill 的 API：尝试使用 Quill 提供的 API 来实现相同的功能。例如，可以通过监听 text-change
事件来检测是否发生了粘贴操作，并根据内容类型决定是否保留更改。 - 增强事件监听：确保你的事件监听器是最先执行的，可以通过将 false 参数改为 true 改为使用事件捕获阶段来尝试提前拦截粘贴事件。
解决方案1和2,我没找到对应的解决办法,直接放弃,接着让前端小伙伴试着把addEventListener(‘paste’, this.handlePaste, false);中的fasle改成true,结果生效了,功夫不有心人啊!
