vue-quill-editor踩坑日志

样式不展示问题

• 场景： 后台前端保存富文本编辑的数据，后台把数据发布到小程序端，小程序无法显示富文本样式 解决方案： 在需要展示的页面中用class="ql-editor"包裹一下

      <p class="ql-editor" v-html="textList"></p>
  

字体和字体大小自定义问题

• 场景：产品要求文字展示是从12px-48px；字体类型：微软雅黑，宋体，仿宋，黑体，楷体等 解决方案，将你需要的字体和字体大小放到白名单里面,并在editorOption里面进行font和size配置

//设置字体大小
 let fontSizeStyle=Quill.import('attributors/style/size') //引入这个后会把样式写在style上
 fontSizeStyle.whitelist=['12px','16px','18px','20px','22px','24px','26px','32px','45px']
 Quill.register(fontSizeStyle,true)

 //设置字体样式
 // let Font = Quill.import('attributors/style/font') //引入这个后会把样式写在style上
 //     let fonts = [false, 'SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial']
 //     Font.whitelist = fonts //将字体加入到白名单
 //     Quill.register(Font, true)

借鉴：www.jianshu.com/p/3a96f9469…

图片上传问题

• 场景：编辑器里面上传图片，压缩成base64也容易体积过大上传不了
  解决方案： www.manongjc.com/article/665…