quill-editor踩坑之路

wangEditor功能比较全，而且容易上手，当时本地单机玩的还不错，无奈迁移到项目报编译错误，找了很多方法都没有解决，于是痛定思痛决定换插件，在试了几款富文本插件均报错的情况下无意中尝试quill富文本，惊喜发现居然没报错，开心之余却发现它的的API不全，实现常用的功能都得自己封装，于是乎踏上漫漫踩坑之路，今天特意抽空总结下，希望能给饱受折磨的兄弟们一点帮助~~~

注意1：quill默认的图片上传方法限制图片大小，几兆的图片直接报错，
所以采用elementUI的图片上传组件将图片先上传到本地，再赋值给Qill-Editor的图片相关函数

注意2：字体样式配置，富文本工具栏配置，上面有哪些项就对应富文本上面的项，在这里可以把不需要
的富文本项去掉

modules里面对toolbar的选项可以在handlers里面添加操作函数，如图片上传，我们可以给"image"
属性添加图片上传函数，再通过参数value判断用户是否有图片上传操作，如果有，直接调用upload的
点击事件进行图片上传(后面详细介绍图片上传参数和方法)

图片上传参数配置，注意：这里是upload插件上传图片，所以参数配置还是跟elementUI的upload组件
用法一样，要配置请求头，请求地址和请求参数

注意，先测试图片上传是否成功，upload组件用法大家应该都熟悉了就不赘述，还是提醒一句，先得保证
自己本地图片上传成功再来测试在QUILL里面图片上传功能，咋们先得保证服务器图片上传没问题，如果
本地是成功的，在quill上传图片出问题排查也更容易

main.js里面的配置：

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor);

分享完毕，以下是完整代码

小结：
1.图片太大建议用upload组件先将图片上传到服务器，再将数据读取赋值给quill-editor图片，否则图片太大直接上传失败
2.对于字体大小等相关配置，网上看到一些朋友说直接找到插件的whitelist属性修改，如果是本地测试可以，上线不可能还跑到依赖包文件直接找到相关代码修改，建议本地配置白名单注入，再写样式覆盖
3.注意源码末尾的关于Quill的CSS要加上，否则我们配置的字体样式设置不生效
4.图片上传先确保上传到自己项目服务器是好的，再放到quill-editor里面调试
周末抽空做了个总结，希望能帮到大家，水平有限不足之处欢迎指正~~