.uploaders{display:none;}.ql-container.ql-snow{行高：正常！重要；高度：250px！重要；字体大小：14px；-tooltip[data-mode="link"]::before{content:"请输入链接地址：";}.ql-tooltip.ql-editinga.ql-action::after{border-right:0px;content:"保存";填充右：0px；}.ql-tooltip[data-mode="video"]::before{content:"请输入视频地址:";}.ql-picker.ql-size{.ql-picker-label[data-value="12px"]::before,.ql-picker-item[data-value="12px"]::before{内容："12px";}.ql-picker-label[data-value="14px"]::before,.ql-picker-item[data-value="14px"]::before{content:"14px";}.ql-picker-label[data-value="16px"]::before,.ql-picker-item[data-value="16px"]::before{content:"16px";}.ql-picker-label[data-value="18px"]::before,.ql-picker-item[data-value="18px"]::before{content:"18px";}.ql-picker-label[data-value="20px"]::before,.ql-picker-item[data-value="20px"]::before{content:"20px";}.ql-picker-label[data-value="22px"]::before,.ql-picker-item[data-value="22px"]::before{content:"22px";}.ql-picker-label[data-value="24px"]::before,.ql-picker-item[data-value="24px"]::before{content:"24px";}.ql-picker-label[data-value="26px"]::before,.ql-picker-item[data-value="26px"]::before{content:"26px";}.ql-picker-label[data-value="28px"]::before,.ql-picker-item[data-value="28px"]::before{content:"28px";}.ql-picker-label[data-value="30px"]::before,.ql-picker-item[data-value="30px"]::before{内容："30px";}.ql-picker-label[data-value="32px"]::before,.ql-picker-item[data-value="32px"]::before{content:"32px";}.ql-picker-label[data-value="34px"]::before,.ql-picker-item[data-value="34px"]::before{content:"34px";}.ql-picker-label[data-value="36px"]::before,.ql-picker-item[data-value="36px"]::before{content:"36px";}}.ql-picker.ql-header{.ql-picker-label::before,.ql-picker-item::before{content:"文本";}.ql-picker-label[data-value="1"]::before,.ql-picker-item[data-value="1"]::before{content:"标题1";}.ql-picker-label[data-value="2"]::before,.ql-picker-item[data-value="2"]::before{内容：“标题2”；}.ql-picker-label[data-value="3"]::before,.ql-picker-item[data-value="3"]::before{content:"标题3";}.ql-picker-label[data-value="4"]::before,.ql-picker-item[data-value="4"]::before{content:"标题4";}.ql-picker-label[data-value="5"]::before,.ql-picker-item[data-value="5"]::before{content:"标题5";}.ql-picker-label[data-value="6"]::before,.ql-picker-item[data-value="6"]::before{content:"标题6";}.ql-picker-label[data-value="7"]::before,.ql-picker-item[data-value="7"]::before{content:"标题7";}}.ql-picker.ql-font{.ql-picker-label[data-value="SimSun"]::before,.ql-picker-item[data-value="SimSun"]::before{content:"宋体";字体系列：“SimSun”！重要；}.ql-picker-label[data-value="SimHei"]::before,.ql-picker-item[data-value="SimHei"]::before{content:"黑体";字体系列：“SimHei”；}.ql-picker-label[data-value="Microsoft-YaHei"]::before,.ql-picker-item[data-value="Microsoft-YaHei"]::before{content:"微软雅黑";font-family:"微软雅黑";}.ql-picker-label[data-value="KaiTi"]::before,.ql-picker-item[data-value="KaiTi"]::before{content:"楷体";font-family:"KaiTi"!important;}.ql-picker-label[data-value="FangSong"]::before,.ql-picker-item[data-value="FangSong"]::before{content:"做宋";font-family:"方宋";}}}}wangEditor功能比较齐全，使用方便。当时本地的单机游戏还不错，无奈迁移到工程报编译错误。找了很多办法解决，于是决定换个插件。试了几个富文本插件后，都报错。在这种情况下，无意中尝试了quill富文本，惊喜地发现居然没有报错。欣喜的发现它的API不全，常用的功能还得自己封装，于是走上了漫漫踩坑之路，今天特意抽空总结一下，希望能给受折磨的兄弟一些帮助~~~注1：Quill默认的图片上传方式限制了图片大小，几兆的图片会直接报错，所以使用elementUI的图片上传组件上传先将图片赋值到本地，再赋值给Qill-Editor的图片相关功能注2：字体样式配置，富文本工具栏配置，上面的哪些项对应富文本上的项，这里可以去掉模块中工具栏不需要的富文本选项可以在handlers中添加操作函数，比如图片上传，我们可以在"image"属性中添加一个图片上传功能，然后通过参数值来判断用户是否有图片上传操作。如果是，直接调用upload的点击事件上传图片（图片上传参数和方法后面会详细介绍）图片上传参数配置，注意：这里是上传图片的upload插件，所以参数配置还是和elementUI的上传组件一样。配置请求头、请求地址和请求参数，首先测试图片是否上传成功，上传组件的用法大家应该不陌生，就不赘述了。在此提醒大家，在测试QUILL中的图片上传功能前，请务必先确保您的本地图片上传成功。首先要保证服务器图片上传没问题。成功了，也更容易排查quill上传图片的问题main.js中配置：importVueQuillEditorfrom'vue-quill-editor'import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor);分享完后，下面是完整代码
.uploaders{display:none;}.ql-container.ql-snow{行高：正常！重要；高度：250px！重要；字体大小：14px；-tooltip[data-mode="link"]::before{content:"请输入链接地址：";}.ql-tooltip.ql-editinga.ql-action::after{border-right:0px;content:"保存";填充右：0px；}.ql-tooltip[data-mode="video"]::before{content:"请输入视频地址:";}.ql-picker.ql-size{.ql-picker-label[data-value="12px"]::before,.ql-picker-item[data-value="12px"]::before{内容："12px";}.ql-picker-label[data-value="14px"]::before,.ql-picker-item[data-value="14px"]::before{content:"14px";}.ql-picker-label[data-value="16px"]::before,.ql-picker-item[data-value="16px"]::before{content:"16px";}.ql-picker-label[data-value="18px"]::before,.ql-picker-item[data-value="18px"]::before{content:"18px";}.ql-picker-label[data-value="20px"]::before,.ql-picker-item[data-value="20px"]::before{content:"20px";}.ql-picker-label[data-value="22px"]::before,.ql-picker-item[data-value="22px"]::before{content:"22px";}.ql-picker-label[data-value="24px"]::before,.ql-picker-item[data-value="24px"]::before{content:"24px";}.ql-picker-label[data-value="26px"]::before,.ql-picker-item[data-value="26px"]::before{content:"26px";}.ql-picker-label[data-value="28px"]::before,.ql-picker-item[data-value="28px"]::before{content:"28px";}.ql-picker-label[data-value="30px"]::before,.ql-picker-item[data-value="30px"]::before{内容："30px";}.ql-picker-label[data-value="32px"]::before,.ql-picker-item[data-value="32px"]::before{content:"32px";}.ql-picker-label[data-value="34px"]::before,.ql-picker-item[data-value="34px"]::before{content:"34px";}.ql-picker-label[data-value="36px"]::before,.ql-picker-item[data-value="36px"]::before{content:"36px";}}.ql-picker.ql-header{.ql-picker-label::before,.ql-picker-item::before{content:"文本";}.ql-picker-label[data-value="1"]::before,.ql-picker-item[data-value="1"]::before{content:"标题1";}.ql-picker-label[data-value="2"]::before,.ql-picker-item[data-value="2"]::before{内容：“标题2”；}.ql-picker-label[data-value="3"]::before,.ql-picker-item[data-value="3"]::before{content:"标题3";}.ql-picker-label[data-value="4"]::before,.ql-picker-item[data-value="4"]::before{content:"标题4";}.ql-picker-label[data-value="5"]::before,.ql-picker-item[data-value="5"]::before{content:"标题5";}.ql-picker-label[data-value="6"]::before,.ql-picker-item[data-value="6"]::before{content:"标题6";}.ql-picker-label[data-value="7"]::before,.ql-picker-item[data-value="7"]::before{content:"标题7";}}.ql-picker.ql-font{.ql-picker-label[data-value="SimSun"]::before,.ql-picker-item[data-value="SimSun"]::before{content:"宋体";字体系列：“SimSun”！重要；}.ql-picker-label[data-value="SimHei"]::before,.ql-picker-item[data-value="SimHei"]::before{content:"黑体";字体系列：“SimHei”；}.ql-picker-label[data-value="Microsoft-YaHei"]::before,.ql-picker-item[data-value="Microsoft-YaHei"]::before{content:"微软雅黑";font-family:"微软雅黑";}.ql-picker-label[data-value="KaiTi"]::before,.ql-picker-item[data-value="KaiTi"]::before{content:"楷体";font-family:"KaiTi"!important;}.ql-picker-label[data-value="FangSong"]::before,.ql-picker-item[data-value="FangSong"]::before{content:"做宋";font-family:"方宋";}}}}总结：1.如果图片太大，建议使用upload组件先将图片上传到服务器，然后读取数据赋值给quill-editor图片，否则图片太大，直接上传失败。2、字体大小等相关配置，在网上看到有朋友说可以直接找到插件的白名单属性修改。修改的话，建议在本地配置白名单注入，然后写样式覆盖。3、注意源码末尾关于Quill的CSS要加上，否则我们配置的字体样式设置不会生效，然后放到quill-editor中调试，周末做了个总结。希望对大家有所帮助。水平有限还望指正~~
