vue-quill-editor安裝及使用：自定義工具欄和自定義中文字體，把字體寫在html的style中

一、自定義工具欄把toolbar在vue的data return裏配置就可以；

二、用vue-quill-editor寫出來的郵件，發出去之後字體樣式變了，那是應該vue-quill-editor改變字體的font-family沒綁定在style上，而是通過class來改變的，這個class只有vue-quill-editor插件纔有，接收郵件端是沒有的，故沒辦法把想要的字體顯示出來，只有把font-family綁定到style纔有效。

效果圖：如下：

 

 以下是方法步驟：

1、vue項目安裝vue-quill-editor：

npm install vue-quill-editor --save

2、vue項目的main.js方法中引入vue-quill-editor：

import  VueQuillEditor from 'vue-quill-editor' //vue-quill-editor其它文件可在應用頁面直接引入

Vue.use(VueQuillEditor)

3、應用頁面引入並生成富文本域：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <quill-editor
      v-model="content"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>

<script>
//引入相關文件
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') //引入這個後會把樣式寫在style上
    fontSizeStyle.whitelist=['45px','60px','90px']
    Quill.register(fontSizeStyle,true)

//設置字體樣式
let Font = Quill.import('attributors/style/font') //引入這個後會把樣式寫在style上
    let fonts = [false, 'SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial']
    Font.whitelist = fonts //將字體加入到白名單
    Quill.register(Font, true)

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'vue-quill-editor demo',
      content: '',
      editorOption: {//配置工具欄
        modules: {
          toolbar:  [
            ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜體，下劃線，刪除線
            ['blockquote', 'code-block'],                      //引用，代碼塊
            [{ 'header': 1 }, { 'header': 2 }],               // 幾級標題
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 有序列表，無序列表
            [{ 'script': 'sub'}, { 'script': 'super' }],      // 下角標，上角標
            [{ 'indent': '-1'}, { 'indent': '+1' }],          // 縮進
            [{ 'direction': 'rtl' }],                         // 文字輸入方向
            [{ 'size': ['45px','60px','90px'] }],  // 字體大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 標題
            [{ 'color': [] }, { 'background': [] }],          // 顏色選擇
            [{ 'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial'] }],// 字體
            [{ 'align': [] }], // 居中
            ['clean']                                         // 清除樣式
          ]
        }
        // 背景顏色 - background
        // 加粗- bold
        // 顏色 - color
        // 字體 - font
        // 內聯代碼 - code
        // 斜體 - italic
        // 鏈接 - link
        // 大小 - size
        // 刪除線 - strike
        // 上標/下標 - script
        // 下劃線 - underline
        // 引用- blockquote
        // 標題 - header
        // 縮進 - indent
        // 列表 - list
        // 文本對齊 - align
        // 文本方向 - direction
        // 代碼塊 - code-block
        // 公式 - formula
        // 圖片 - image
        // 視頻 - video
        // 清除字體樣式- clean
      }
    }
  },
  created() {

  },
  mounted() {
    
  },
  methods: {
    onEditorChange() {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.quill-editor >>> .ql-container {
  min-height: 300px;
}
/*
這裏一定要寫上，是用來把相關改變的配置在工具欄正常顯示
如果不寫，字體樣式的下拉會重複顯示Sans Serif，字體大小的下拉會重複顯示Normal
*/

.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋體";
  font-family: "SimSun"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑體";
  font-family: "SimHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微軟雅黑";
  font-family: "Microsoft YaHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷體";
  font-family: "KaiTi"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='45px']::before, 
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='45px']::before {
    content: '45px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='60px']::before, 
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='60px']::before {
    content: '60px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='90px']::before, 
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='90px']::before {
    content: '90px';
}
</style>