quill修改字體大小

1.設置字體大小

 ['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': ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']}],// 字體大小
// [{'size': fontSizeStyle.whitelist}],// 默認字體大小
[{'header': [1, 2, 3, 4, 5, 6, false]}],//幾級標題
[{'color': []}, {'background': []}],// 字體顏色，字體背景顏色
// [{'font': []}], //字體
[{ 'font': fonts }],       //字體，把上面定義的字體數組放進來
[{'align': []}], //對齊方式
['clean'],//清除字體樣式
['link', 'image', 'video'], //上傳圖片、上傳視頻

2.修改配置里的字體

在\node_modules\quill-image-resize-module\node_modules\quill\dist路徑下的 quill.core.js 文件里

quill.js

quill.bubble.css 

// 需要全部增加一下css選項，需要注意的是data-value=如果是接數字要有引號，字符串可以不帶引號
//10px,12px等等新設置的大小都要設置相應的類名字體大小
.ql-editor .ql-size-10px {
    font-size: 10px;
}
// select選擇的字體大小
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    font-size: 10px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    content: '10px';    
}

quill.core.css

// 需要全部增加一下css選項
.ql-editor .ql-size-10px {
    font-size: 10px;
}

quill.snow.css 

// 需要全部增加一下css選項
.ql-editor .ql-size-10px {
    font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    content: '10px';
}
// select選擇的字體大小
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    font-size: 10px;
}