vue-quill-editor配置字号

vue-quill-editor 可选择字号配置

用到quill的组件内部

    import {quillEditor,Quill} from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    let fontSizeStyle=Quill.import('attributors/style/size')
    fontSizeStyle.whitelist=['45px','60px','90px']
    Quill.register(fontSizeStyle,true)	 //重写字号选择列表
     editorOption: {
         placeholder: '输入文本...',
         theme: 'snow', // 主题
         modules: {
             // imageResize: {   // 添加图片拖拽上传，自定义大小
             //     displayStyles: {   // 添加
             //         backgroundColor: 'black',
             //         border: 'none',
             //         color: 'white',
             //     },
             //     modules: ['Resize', 'DisplaySize', 'Toolbar'],   // 添加
             // },
             // imageDrop: true,      //图片拖拽
             toolbar: {
                 container: [
                     [{'color': []}, {'size': fontSizeStyle.whitelist}],
                 ],

             },
         },
     },

主题选择的snow 则修改对应的css

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='45px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='45px']::before {
  content: '45px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='60px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='60px']::before {
  content: '60px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='90px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='90px']::before {
  content: '90px';
}
//字体列表显示的大小
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='45px']::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='60px']::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='90px']::before {
  font-size: 32px;
}

然后就OK了