Vue中使用quill中遇到的粘贴问题(图片直接转base64，导致数据过大)
quill富文本编辑器的粘贴问题
前言：公司后台项目中有富文本功能，我们选取了quill这个插件来使用。在实际过程中，只对上传图片按钮做了上传至服务器的功能，对粘贴的图片并没有做处理，导致前端显示的时候，base64图片数据过大而出错。
解决方法一：对quill中的方法做修改
可以看到quill中关于粘贴的源码如下，有图片时执行了
this.quill.uploader.upload(range, files);复制代码
关于upload方法，在此不细讲，可以在modules中的uploader.js中查看，查看该模块可知，图片转成了base64并插入到文本中
this.quill.root.addEventListener('paste', this.onCapturePaste.bind(this));
onCapturePaste(e) {
if (e.defaultPrevented || !this.quill.isEnabled()) return;
e.preventDefault();
const range = this.quill.getSelection(true);
if (range == null) return;
const html = e.clipboardData.getData('text/html');
const text = e.clipboardData.getData('text/plain');
const files = Array.from(e.clipboardData.files || []);
if (!html && files.length > 0) {
this.quill.uploader.upload(range, files); //有图片时执行此句
} else {
this.onPaste(range, { html, text });
}
}复制代码如何解决？那我们让upload方法不执行不就行了。
因为引入quill的入口文件是dist/quill.js；所以可以将代码fork到仓库，然后修改相应的地方；
patch-package方法为包打补丁，网上有教程，不在此赘述；这样做的好处是不需要自己fork一套代码
解决方法二：在自己代码中使用富文本的地方，加上粘贴监听
// 自定义粘贴图片功能
this.quill.root.addEventListener(
"paste",
evt => {
if (
evt.clipboardData &&
evt.clipboardData.files &&
evt.clipboardData.files.length
) {
evt.preventDefault();
//上传服务器并拿到返回的图片地址，插入到富文本中
}
},
true //注意
);复制代码利用监听事件的第三个参数来处理，为true的话，该事件在捕获阶段执行，优先于quill源码中监听粘贴事件，源码中第三个参数为默认false，则会先执行我们自己自定义方法，并上传图片至服务器，而
evt.preventDefault()阻止了默认事件发生，使得源码中(e.defaultPrevented || !this.quill.isEnabled())为true,因为此刻e.defaultPrevented为true，则源码中的代码不会往下执行。这样非文本粘贴也不会执行，但是我们自己写的监听还是会执行粘贴文本的，因为preventDefault()只对file类型阻止了默认事件。
作者：lllllllu
链接：https://juejin.cn/post/7021775850383097864