quill添加字體

1 .新建一個font.css文件

把需要自定義放在字體列表的字體放在這個css中，選擇器如下。data-value后的值是要拼在.ql-font-后面的，需要保持一致。

[data-value=a]    ql-font-a

content指的是字體列表中的選項

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
    content: "宋體";
    font-family: "SimSun";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
    content: "黑體";
    font-family: "SimHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
    content: "微軟雅黑";
    font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
    content: "楷體";
    font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
    content: "仿宋";
    font-family: "FangSong";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
    content: "Arial";
    font-family: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
    content: "Times New Roman";
    font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
    content: "sans-serif";
    font-family: "sans-serif";
}
 
.ql-font-SimSun {
      font-family: "SimSun";
}
.ql-font-SimHei {
      font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
      font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
      font-family: "KaiTi";
}
.ql-font-FangSong {
      font-family: "FangSong";
}
.ql-font-Arial {
      font-family: "Arial";
}
.ql-font-Times-New-Roman {
      font-family: "Times New Roman";
}
.ql-font-sans-serif {
      font-family: "sans-serif";
}

2 .在使用的文件里引入

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style> @import './style/font'; </style>

3.在toolsbar中配置字體

<script>
    import { quillEditor } from 'vue-quill-editor'
    import * as Quill from 'quill'  //引入編輯器
    
    //quill編輯器的字體
    var fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];  
    var Font = Quill.import('formats/font');  
    Font.whitelist = fonts; //將字體加入到白名單 
    Quill.register(Font, true);
    
    export default {
        data:function(){
            return{
                content:'',
                editorOption:{
                    modules:{
                        toolbar:[
                              ['bold', 'italic', 'underline', 'strike'], //加粗，斜體，下划線，刪除線

        　　　　　　　　　　　　['blockquote', 'code-block'], //引用，代碼塊
        　　　　　　　　　　　　[{'header': 1}, {'header': 2}],// 標題，鍵值對的形式；1、2表示字體大小
        　　　　　　　　　　　　[{'list': 'ordered'}, {'list': 'bullet'}], //列表
        　　　　　　　　　　　　[{'script': 'sub'}, {'script': 'super'}],// 上下標
       　　　　　　　　　　　　 [{'indent': '-1'}, {'indent': '+1'}],// 縮進
       　　　　　　　　　　　　 [{'direction': 'rtl'}],// 文本方向
       　　　　　　　　　　　　 [{'size': ['small', false, 'large', 'huge']}],// 字體大小
      　　　　　　　　　　　　  [{'header': [1, 2, 3, 4, 5, 6, false]}],//幾級標題
      　　　　　　　　　　　　  [{'color': []}, {'background': []}],// 字體顏色，字體背景顏色
      　　　　　　　　　　　　  // [{'font': []}], //字體
       　　　　　　　　　　　　 [{ 'font': fonts }],       //字體，把上面定義的字體數組放進來
       　　　　　　　　　　　　 [{'align': []}], //對齊方式
     　　　　　　　　　　　　   ['clean'],//清除字體樣式
        　　　　　　　　　　　　['link', 'image', 'video'], //上傳圖片、上傳視頻

 ] }, theme:'snow' } } } } </script>

效果如下：