quilleditor 字体大小设置_vue-quill-editor如何设置字体默认大小？

集众家之言后，我采用以下方式初步实现了设置默认字体大小

1、全局引入以下内容，完成自定义字号的注册

import * as Quill from 'quill';

let fontSizeStyle = Quill.import('attributors/style/size');

fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px', '20px', '24px', '36px', false];

2、在editor的配置项中配置size菜单

export default {

data() {

editorOption: {

modules: [

[{ 'size': fontSizeStyle.whitelist }]

]

}

}

}

3、写入对应css样

.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';

}

.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';

}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {

content: '20px';

}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {

content: '24px';

}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {

content: '36px';

}

4、给编辑器配置默认字体大小

以上操作后，默认会选中false配置项，此时需要给编辑器写入默认样式

.ql-container {

font-size:16px;

}