vue quill 富文本編輯器 添加字體大小選擇

下面是實現效果

首先咱們是用在vue項目中的，使用的是vue-quill-editor插件
若是想知道vue-quill-editor的基礎用法和圖片上傳能夠看看我以前寫的一篇文章
基本用法：
https://github.com/surmon-china/vue-quill-editor
富文本框圖片上傳七牛：
http://www.javashuo.com/article/p-yldiedjp-eb.html

咱們這裏主要講述配置字體大小選擇框
在使用組件界面作配置
一、導入Quill

import * as Quill from 'quill'

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

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']
]

四、使用

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>