轻量级富文本编辑器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工具栏

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

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

在methods里面处理一下图片

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

用Vue插件quill-editor添加图片的时候默认会被转为base64编码导致数据很长，因此上传数据的时候会发生错误

1，创建quill-config.js文件

需要特别注意这一行，把服务器返回的URL赋值到富文本的img进行展示

2,Vue页面使用

两种主题

toolbar的自定义：

quill取消了getHtml()的API，getContents()返回的是Delta对象，一种JSON数组，getText()返回文本域里对应字符串。

因平台需将用户编辑的格式传回后台生成邮件的正文，而邮件的正文是Html格式，通过查issue找到获取Html的方法： quill.container.firstChild.innerHTML

---