VueQuillEditor 如何添加自定义字体？

Quill 编辑自定义字体列表还比较麻烦的，总结了下最终的解决方法

首先配置的时候编辑下允许使用的字体们

import Vue from 'vue'; 
import VueQuillEditor from 'vue-quill-editor'; 
Vue.use(VueQuillEditor);

let fonts = ['宋体','黑体','艺术字'];

let Font = VueQuillEditor.Quill.import('formats/font'); 
Font.whitelist = API.font; 
VueQuillEditor.Quill.register(Font, true); 

配置编辑器的时候把之前设置的字体加上

{ 
    modules:{ 
        toolbar:{ 
            container:[ 
                ... 
                [{ 
                    'font': ['宋体','黑体','艺术字'] 
                }], 
                ... 
            ] 
    ... 

下拉列表的文字通过样式根据 DOM 上的 data-value 属性显示

.quill-editor{ 
    .ql-font{ 
        .ql-picker-label{ 
            &[data-value]::before { 
                content:attr(data-value); 
            } 
        } 
        .ql-picker-options{ 
            span[data-value]::before { 
                content:attr(data-value); 
            } 
        } 
    } 
}

.ql-font-宋体 { 
    font-family: "宋体",serif; 
}

.ql-font-黑体 { 
    font-family: "黑体",sans-serif; 
}

.ql-font-艺术字 { 
    font-family: "艺术字",sans-serif; 
}