vue-quill-editor是我们在使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时候,我们往往要插入一些图片,vue-quill-editor默认的处理方式是直接将图片转成base64编码,这样的结果是整个富文本的html片段十分冗余,有可能导致提交失败,或者是用户体验很差,数据要传递很久才全部传送到服务器。因此,在富文本编辑的过程中,对于图片的处理,我们更合理的做法是将图片上传到服务器,再将得到的图片链接插入到富文本中,以达到最优的体验。
首先安装quill editor npm install vue-quill-editor --save
全局挂载
在main.js中引用
使用
在需要用到富文本的vue中引用和配置quill editor工具栏
关于上传图片按钮的事件 !important
在editorOption中的handlers事件中处理图片上传(配置中的handlers是用来定义自定义程序的)
iview自带的upload上传自带三个函数
在methods里面处理一下图片
如果有错误,欢迎大家多提提意见~