quill-editor添加图片压缩功能

要为Quill.js的编辑器添加图片压缩功能，可以使用quill-image-compress模块。首先，需要安装该模块，可以使用命令`yarn add quill-image-compress`进行安装。在创建Quill实例时，需要在modules中添加imageCompress模块，并设置quality参数来指定图片的压缩质量。

另外，可以使用vue-quill-editor库来创建一个带有图片上传功能的富文本编辑器。首先，新建一个input框，并设置其type为file，当用户选择图片时，通过添加默认点击事件，让其代理选取图片文件。然后，使用lrz插件来压缩图片，并将压缩完成的图片返回给vue-quill-editor富文本编辑器。

在Vue组件的methods中，可以编写一个压缩图片的方法。该方法首先获取用户选择的文件，并使用lrz插件对图片进行压缩，设置压缩后图片的宽度为1024。然后，创建一个新的Image对象，将压缩后的图片赋值给img的src属性。接下来，通过`this.$refs.myQuillEditor.quill`来获取富文本编辑器的编辑框，将焦点聚焦在编辑框上，并使用`quill.insertEmbed`方法将压缩后的图片插入到编辑器中。最后，返回压缩后的图片结果。

通过以上步骤，就可以为Quill-editor添加图片压缩功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [quill-image-compress:Quill富文本编辑器模块，可压缩上传到编辑器的图像](https://download.csdn.net/download/weixin_42118161/18324051)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [富文本编辑器vue-quill-editor上传图片过大](https://blog.csdn.net/m0_46754058/article/details/123723424)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]