vue-quill-editor set font size

The project needs to use a rich text editor, Vue, so I chose vue-quill-editor, a rich text editor, and found that there are only a few font sizes to choose from, which cannot meet the needs of the product. After a long time of research, I finally changed it. . Mainly need to change the configuration file, as well as the corresponding CSS and js files.

Change the configuration items of toolbarOptions under the editor.vue page

(Editor.vue is the encapsulated rich text editor)

const toolbarOptions = [
//  原本是 'small',fasle,'large','huge'，改成自己想要设置的大小，这会改变页面下拉框的个数以及每个选项的data-value值，插件的js会根据data-value的值去增加对应的class类名。 
[{'size': ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']}], 

]

Then find quill under node_modules, and modify the css file and js file under the directory dist.

quill.core.js below

// small,large,huge 这三个是默认的，可以删可以留。后面必须增加和editor配置项一样。
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']

quill.js below

// 跟quill.core.js 同理，修改下面两项,huge及之前都是默认的
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
var SIZES = ['small', false, 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px'];

quill.bubble.css below

// 需要全部增加一下css选项，需要注意的是data-value=如果是接数字要有引号，字符串可以不带引号
//10px,12px等等新设置的大小都要设置相应的类名字体大小
.ql-editor .ql-size-8px {
    font-size: 8px;
}
// select选择的字体大小
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    font-size: 8px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    content: '8px';    
}

quill.core.css below

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

quill.snow.css below

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

tips: If the background management system edits the rich text, the front page is displayed (vue-quill-editor is not referenced), and the front page does not forget to reference the changed css file!