前言：Vue項(xiàng)目中需要用到富文本編輯器架专，所以選擇了vue-quill-editor這個(gè)富文本編輯器介粘，發(fā)現(xiàn)字體只有幾種大小可以選擇喷鸽，滿足不了產(chǎn)品的需求，研究了半天終于改好了讼庇。主要是需要更改配置文件绎巨，以及對(duì)應(yīng)的CSS和js文件。
修改后效果圖如下：
font-size.png
1.改變 toolbarOptions的配置項(xiàng),如圖是我自定義的字體大小蠕啄，false代表的默認(rèn)選中的字體大小,默認(rèn)選中的16px场勤。
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'size': ['12px', '14px', false ,'18px', '22px', '26px', '30px', '36px', '42px'] }],
[{ 'font': [] }],
[{ 'align': [] }],
["image"] //上傳圖片
]
}
2.接下來(lái)我們?cè)?node_modules包 中找到 quill ，再找到它下面的dist文件夾歼跟。
quill_dist.jpg
3.在quill.core.js中更改代碼如下和媳，也要和你上面配置文件中的字體大小設(shè)置保持一致。
var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', {
scope: _parchment2.default.Scope.INLINE,
whitelist: ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']
});
var SizeStyle = new _parchment2.default.Attributor.Style('size', 'font-size', {
scope: _parchment2.default.Scope.INLINE,
whitelist: ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']
});
4.在quill.js中更改代碼如下哈街，也要和你上面配置文件中的字體大小設(shè)置保持一致留瞳。
var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', {
scope: _parchment2.default.Scope.INLINE,
whitelist: ['12px', '14px', '16px' ,'18px', '22px', '26px', '30px', '36px', '42px']
});
var SizeStyle = new _parchment2.default.Attributor.Style('size', 'font-size', {
scope: _parchment2.default.Scope.INLINE,
whitelist: ['12px', '14px', '16px' ,'18px', '22px', '26px', '30px', '36px', '42px']
});
===================================我是分割線=========================================
接下來(lái)就是修改CSS樣式了，因代碼過長(zhǎng)骚秦，所以示例中只寫了12px和14px她倘，其他字體大小按同樣方式配置即可~~
5.找到quill.core.css，修改如下：
.ql-editor .ql-size-12px {
font-size: 12px;
}
.ql-editor .ql-size-14px {
font-size: 14px;
}
...
6.找到quill.bubble.css骤竹，修改如下：
/*第一部分*/
.ql-editor .ql-size-12px {
font-size: 12px;
}
.ql-editor .ql-size-14px {
font-size: 14px;
}
...
/*第二部分*/
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
content: '12px';
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
content: '14px';
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
font-size: 12px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
font-size: 14px;
}
...
7.找到quill.snow.css帝牡，修改如下：
（注：第一項(xiàng)為編輯器默認(rèn)的字體大小）
/*第一項(xiàng)為編輯器默認(rèn)的字體大小*/
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
content: '16px';
}
...
