前言：Vue项目中需要用到富文本编辑器，所以选择了vue-quill-editor这个富文本编辑器，发现字体只有几种大小可以选择，满足不了产品的需求，研究了半天终于改好了。主要是需要更改配置文件，以及对应的CSS和js文件。
修改后效果图如下：
font-size.png
1.改变 toolbarOptions的配置项,如图是我自定义的字体大小，false代表的默认选中的字体大小,默认选中的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.接下来我们在 node_modules包 中找到 quill ，再找到它下面的dist文件夹。
quill_dist.jpg
3.在quill.core.js中更改代码如下，也要和你上面配置文件中的字体大小设置保持一致。
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中更改代码如下，也要和你上面配置文件中的字体大小设置保持一致。
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']
});
===================================我是分割线=========================================
接下来就是修改CSS样式了，因代码过长，所以示例中只写了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，修改如下：
（注：第一项为编辑器默认的字体大小）
/*第一项为编辑器默认的字体大小*/
.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';
}
...
