vue-quill-editor设置字体⼤⼩
项⽬中需要⽤到富⽂本编辑器，⽤的Vue，所以选择了vue-quill-editor这个富⽂本编辑器，发现字体只有⼏种⼤⼩可以选择，满⾜不了产品的需求，研究了半天终于改好了。主要是需要更改配置⽂件，以及对应的CSS和js⽂件。
editor.vue 页⾯下改变 toolbarOptions的配置项
（editor.vue就是封装的富⽂本编辑器）
const toolbarOptions = [
//  原本是 'small',fasle,'large','huge'，改成⾃⼰想要设置的⼤⼩，这会改变页⾯下拉框的个数以及每个选项的data-value值，插件的js会根据data-value的值去增加对应的class类名。
[{'size': ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']}],
asp富文本编辑器
]
再到node_modules下⾯到 quill, 对⽬录dist 下⾯的 css⽂件和 js⽂件进⾏修改。
// small,large,huge 这三个是默认的，可以删可以留。后⾯必须增加和editor配置项⼀样。
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
quill.js 下⾯
// 跟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 下⾯
// 需要全部增加⼀下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';
}
// 需要全部增加⼀下css选项
.ql-editor .ql-size-10px {
font-size: 10px;
}
quill.snow.css 下⾯
// 需要全部增加⼀下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：如果后台管理系统编辑富⽂本，前台页⾯展⽰出来(没引⽤vue-quill-editor)，前台页⾯别忘了引⽤改动后的css⽂件哦！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。