vue quill 富文本编辑器 添加字体大小选择

下面是实现效果

首先我们是用在vue项目中的，使用的是vue-quill-editor插件
如果想知道vue-quill-editor的基础用法和图片上传可以看看我之前写的一篇文章
基本用法：
https://github.com/surmon-china/vue-quill-editor
富文本框图片上传七牛：
https://segmentfault.com/a/1190000020378617

我们这里主要讲述配置字体大小选择框
在使用组件界面做配置
1、导入Quill

import * as Quill from 'quill'

2、配置字体列表，主要是修改Quill、attributors/style/size

let fontSizeStyle = Quill.import('attributors/style/size')
fontSizeStyle.whitelist = ['12px', '14px', '16px', '20px', '24px', '36px']
Quill.register(fontSizeStyle, true)

3、定义配置项

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{'color': []}, { 'size': fontSizeStyle.whitelist }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ indent: '-1' }, { indent: '+1' }],
  ['link', 'image']
]

4、使用

data () {
    return {
      editorOption: {
        placeholder: '请输入',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      }
    }
}
  

整体使用代码