本篇内容介绍了“vue-quill-editor怎么设置字体大小”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
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']}], ]再到node_modules下面找到 quill, 对目录dist 下面的 css文件和 js文件进行修改。
quill.core.js 下面
// small,large,huge 这三个是默认的，可以删可以留。后面必须增加和editor配置项一样。whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']quill.js 下面
// 跟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 下面
// 需要全部增加一下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 下面
// 需要全部增加一下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文件哦！
vue-quill-editor 样式问题
引入snow.css，在需要展示的页面中用如下元素包裹即可
<div class="ql-container ql-snow"> <div class="ql-editor" v-html="content"> </div></div>“vue-quill-editor怎么设置字体大小”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
