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>