轻量级富文本编辑器quill editor结合iview的使用

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里面处理一下图片





如果有错误,欢迎大家多提提意见~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容