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

Question

使用vue-quill-editor复制文本，设置字体默认大小

Answer 1

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

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;
}

Answer 2

默认选中的是36px吗？为什么我设置完选中的还是Normal，在最后一项也出现了Normal

Answer 3

楼主找到解决的方法了吗，我这边也遇到了类似的问题