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

vue-quill-editor是我们在使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时候,我们往往要插入一些图片,vue-quill-editor默认的处理方式是直接将图片转成base64编码,这样的结果是整个富文本的html片段十分冗余,有可能导致提交失败,或者是用户体验很差,数据要传递很久才全部传送到服务器。因此,在富文本编辑的过程中,对于图片的处理,我们更合理的做法是将图片上传到服务器,再将得到的图片链接插入到富文本中,以达到最优的体验。


首先安装quill editor      npm install vue-quill-editor --save


全局挂载  

在main.js中引用

轻量级富文本编辑器quill editor结合iview的使用_第1张图片

使用

在需要用到富文本的vue中引用和配置quill editor工具栏

轻量级富文本编辑器quill editor结合iview的使用_第2张图片

关于上传图片按钮的事件   !important


在editorOption中的handlers事件中处理图片上传(配置中的handlers是用来定义自定义程序的)

轻量级富文本编辑器quill editor结合iview的使用_第3张图片

iview自带的upload上传自带三个函数

处理图片的函数

在methods里面处理一下图片


轻量级富文本编辑器quill editor结合iview的使用_第4张图片




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

你可能感兴趣的:(轻量级富文本编辑器quill editor结合iview的使用)