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
          }
        }
      }
    }
}

<quill-editor
  v-model="content"
  ref="myQuillEditor"
  :options="editorOption"
  @change="onEditorChange($event)"
>
</quill-editor>

整体使用代码

<template>
  <div id='quillEditorQiniu'>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill'
let fontSizeStyle = Quill.import('attributors/style/size')
fontSizeStyle.whitelist = ['12px', '14px', '16px', '20px', '24px', '36px']
Quill.register(fontSizeStyle, true)
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{'color': []}, { 'size': fontSizeStyle.whitelist }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ indent: '-1' }, { indent: '+1' }],
  ['link', 'image']
]
// 自定义编辑器的工作条
export default {
  components: {
    quillEditor
  },
  mounted () {
    // 工具栏中的图片图标被单击的时候调用这个方法
    let imgHandler = function (state) {
      if (state) {
        document.querySelector('.avatar-uploader input').click()
      }
    }
    // 当工具栏中的图片图标被单击的时候
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },
  data () {
    return {
      editorOption: {
        placeholder: '请输入',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      }
    }
  }
}
</script>