參考：
https://www.cnblogs.com/calvinK/p/6322512.html?utm_source=tuicool&utm_medium=referral
中文文檔：https://bingkui.gitbooks.io/quill/content/guides/howtocustomizequill.html
案例1：擴展原有插件
// 字體 https://blog.csdn.net/Alison_Rose/article/details/79929319
var fonts = ['SimSun', 'SimHei', 'MicrosoftYaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif','yrdzst'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //將字體加入到白名單
Quill.register(Font, true);
案例2：自定義下拉菜單按鈕插件（文字行高）
定義按鈕樣式：
.ql-line-height .ql-picker-label::before,
.ql-line-height .ql-picker-item::before {
content: '文字行高';
}
.ql-line-height .ql-picker-label[data-label=a]::before,
.ql-line-height .ql-picker-item[data-label=a]::before {
content: '行高(1倍)';
}
編寫按鈕html代碼：
<select title="文字行高" class="ql-line-height">
<option selected></option>
<option value="1">a</option>
</select>
編寫腳本代碼：
var Parchment = window.Quill.import('parchment');
// 定義
let LineHeightClass = {
scope: Parchment.Scope.INLINE, // INLINE:行內元素, BLOCK:塊元素，EMBED:封裝類型(如：Video)
whitelist: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'aa', 'ab', 'ac', 'ad', 'ae']
}
let LineHeightStyle = {
scope: Parchment.Scope.INLINE,
whitelist: ['1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', '2.1', '2.2', '2.3', '2.4', '2.5', '2.6', '2.7', '2.8', '2.9', '3', '3.1', '3.2', '3.3', '3.4', '3.5', '3.6', '3.7', '3.8', '3.9', '4']
}
// 第一個參數跟按鈕html代碼裏class="ql-line-height"的line-height一致，第二個參數爲作用到html代碼裏的class選擇符或style行內樣式
var lineHtClass = new Parchment.Attributor.Class('line-height', 'ql-line-height', LineHeightClass);
var lineHtStyle = new Parchment.Attributor.Style('line-height', 'line-height', LineHeightStyle);
Parchment.register(lineHtClass);
Parchment.register(lineHtStyle);
選擇菜單後元素裏會添加 style="line-height:2.6;" 樣式代碼，效果圖：
如果要實現元素屬性，類似data-lineHeight="1.3",效果圖：
代碼如下：
var Parchment = window.Quill.import('parchment');
// 定義
let LineHeightClass = {
scope: Parchment.Scope.INLINE, // INLINE:行內元素, BLOCK:塊元素， EMBED:封裝類型(如：Video)
whitelist: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'aa', 'ab', 'ac', 'ad', 'ae']
}
let LineHeightStyle = {
scope: Parchment.Scope.INLINE,
whitelist: ['1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', '2.1', '2.2', '2.3', '2.4', '2.5', '2.6', '2.7', '2.8', '2.9', '3', '3.1', '3.2', '3.3', '3.4', '3.5', '3.6', '3.7', '3.8', '3.9', '4']
}
var lineHtAttribute = new Parchment.Attributor.Attribute('lineHeight', 'data-lineHeight', LineHeightStyle);
Parchment.register(lineHtAttribute);
有個問題， 添加的data-lineHeight值在quill初始化的時候會被過濾，本人不知道要怎麼設置， 知道的小夥伴留言告知下
quill.js如果沒有選擇過下拉菜單的話， 默認是不選中當前文字大小或行高的選項，需要在源代碼裏手動添加，
具體代碼（源代碼中搜索 input.classList.toggle('ql-active' 即可定位到）：
{
key: 'update',
value: function update(range) {
var _this = this;
var formats = range == null ? {} : this.quill.getFormat(range);
this.controls.forEach(function(pair) {
var _pair = _slicedToArray(pair, 2);
var format = _pair[0];
var input = _pair[1];
try{
// try塊裏的即爲添加的初始化代碼
if (format ==='size' && !formats.size){
var s = $(_this.quill.container).css('font-size');
if (s && s.indexOf('px') > -1){
formats.size = parseInt(s.replace('px', ''));
}
}
if (format === 'line-height' && !formats['line-height']){
var lineHeight = $(_this.quill.container).css('line-height');
if (!window.lineHeightMap){
window.lineHeightMap = {};
var s = 13.2;
var v = 1;
for(var i = 0; i< 31; i++){
s = Math.round((s + 1.2)* 10) / 10;
v = Math.round((v + 0.1)*10)/10;
window.lineHeightMap[s+'px'] = v + '';
}
}
if ('normal' === lineHeight){
formats['line-height'] = '1';
}else{
formats['line-height'] = window.lineHeightMap[lineHeight];
}
}
}catch(e){
console.log(e);
}
if (input.tagName === 'SELECT') {
var option = void 0;
if (range == null) {
option = null;
} else if (formats[format] == null) {
option = input.querySelector('option[selected]');
} else if (!Array.isArray(formats[format])) {
var value = formats[format];
if (typeof value === 'string') {
value = value.replace(/\"/g, '\\"');
}
option = input.querySelector('option[value="' + value + '"]');
}
if (option == null) {
input.value = ''; // TODO make configurable?
input.selectedIndex = -1;
} else {
option.selected = true;
}
} else {
if (range == null) {
input.classList.remove('ql-active');
} else if (input.hasAttribute('value')) {
// both being null should match (default values)
// '1' should match with 1 (headers)
var isActive = formats[format] === input.getAttribute('value') || formats[format] != null && formats[format].toString() === input.getAttribute('value') || formats[format] == null && !input.getAttribute('value');
input.classList.toggle('ql-active', isActive);
} else {
input.classList.toggle('ql-active', formats[format] != null);
}
}
});
}
}