前言：Vue項目中需要用到富文本編輯器，所以選擇了vue-quill-editor這個富文本編輯器乎折，發(fā)現(xiàn)字體font-family只有三種Sans Serif、Serif侵歇、MonoSpace可以選擇骂澄，滿足不了產品的需求，研究了半天終于改好了惕虑。主要是需要更改配置文件坟冲，以及對應的CSS文件。

1.改變 toolbarOptions的配置項,如圖是我自定義的字體樣式,默認選中的微軟雅黑溃蔫。

font-family.png

具體操作代碼如下：

import Quill from 'quill'  //引入編輯器
var fonts = ['Microsoft-YaHei','SimSun', 'SimHei','KaiTi','Arial','Times-New-Roman'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //將字體加入到白名單
/*data中toolbar配置如下：*/
editorOption: {
  modules: {
    toolbar: [
       [{ 'font': fonts }],
       [{ 'size': ['12px', '14px', false ,'18px', '22px', '26px', '30px', '36px', '42px'] }],
       ['bold', 'italic', 'underline', 'strike'],
       [{ 'indent': '-1' }, { 'indent': '+1' }],
       [{ 'align': [] }],
       ["image"] //上傳圖片
    ]
  }
}

1.在 node_modules包 中找到 quill 健提，再找到它下面的dist文件夾。

2.找到quill.core.css伟叛，修改如下：

.ql-editor .ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}
.ql-editor .ql-font-SimSun {
  font-family: "SimSun";
}
.ql-editor .ql-font-SimHei {
  font-family: "SimHei";
}
.ql-editor .ql-font-KaiTi {
  font-family: "KaiTi";
}
.ql-editor .ql-font-Arial {
  font-family: "Arial";
}
.ql-editor .Times-New-Roman {
  font-family: "Times New Roman";
}

3.找到quill.snow.css私痹，修改如下：

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '微軟雅黑';
}
.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: "微軟雅黑";
}
.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: "宋體";
}
.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: "黑體";
}
.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: "楷體";
}
.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";
}
.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";
}