轻量级富文本编辑器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里面处理一下图片

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

我正在使用iview， 首先保证系统有node.js, 可以支持npm安装，然后按照下面的简单步骤进行：

npm install iview --save

这样在你的package.json可以看到：

"dependencies": {

"axios": "^0.16.2",

"iview": "^2.0.0-rc.13",

在你的main.js这种文件里面（也就是你的工程里面new Vue的那个文件），加入下面代码：

import iView from 'iview'

Vue.use(iView)

然后在自己新加的component 里面，你就可以直接使用iview的控件了，例如<Table>，很方便也很美观。

最后推荐你研究下iview-admin这个，如果是做一个简单的网站，比如cms管理，你可以直接下载他们的工程，参考他们的代码，甚至直接这个工程进行修改。

---