vue-quill-editor 插入图片自定义

最新推荐文章于 2022-04-24 22:55:34 发布

Anna诶

最新推荐文章于 2022-04-24 22:55:34 发布

阅读量2.1k

点赞数 2

分类专栏： vue-quill-editor 文章标签：前端

本文链接：https://blog.csdn.net/qq_41789865/article/details/108539254

版权

本文介绍了如何解决vue-quill-editor在处理大图或大量图片时出现的问题，通过自定义图片上传方式来优化。思路是编写上传图片功能，当在富文本编辑器中插入图片时，触发自定义上传，成功后利用quill.insertEmbed方法插入图片地址。具体实现包括七牛云的图片上传和编辑器选项设置。

摘要由CSDN通过智能技术生成

vue-quill-editor这个富文本编辑器它上传图片的方式是直接将图片转成base64编码，在需要上传大图或者要上传很多张图片的时候，就会出现问题。要解决这个问题从别的博主那里观察到要么换一个富文本编辑器、要么就自己修改一下该富文本编辑器的上传图片的方式。因为这问题是用完之后代码迭代的时候才出现的，所以我采取的是第二种方法。

说一下我的思路，首先我们要先写一个上传图片的功能，因为我们的思路是在使用富文本编辑器的插入图片时，就触发自己写的上传图片的功能去上传图片。等图片上传成功之后再去获取到富文本编辑框的光标所在位置使用quill.insertEmbed(‘光标位置’, 'image', ‘图片地址’)方法去把刚刚上传的图片给他用‘<img/>’标签给他代替掉就OK了。如果不知道这是个啥方法的同学请自行去百度（姨母式微笑）。

1、页面（我用的是七牛云）

<quill-editor ref="myQuillEditor" :disabled='searchOff' v-model="butlerform.articleContent" :options="editorOption" style="height:400px;" @blur="onEditorBlur($event)" @change="onEditorChange($event)">
</quill-editor>
<el-upload class="avatar-uploader" id