vue-quill-editor改变默认字体大小

在此之前，你需要安装好vue-quill-editor，可以看我另外一篇文章

参考文章
https://blog.csdn.net/weixin_43968658/article/details/88060540#commentsedit

• 修改vue-quill-editor的配置项

const toolbarOptions  = [
    // 大家如果想要更多的字体大小，可以自行增加
    [{'size': ['12px','16px' , '20px']}],
]

• 在node_modules下面找到 quill, 对目录dist 下面的 css文件和 js文件进行修改

// 1. quill.core.js
// small,large,huge 这三个是默认的，可删可留（如果删除，请删除对应的css以及js）
whitelist: ['12px','16px' , '20px']

// 2. quill.js
whitelist: ['12px','16px' , '20px']
var SIZES = ['12px','16px' , '20px']

// 3. quill.bubble.css
// 先找到 .ql-editor .ql-size-huge、ql-editor .ql-size-large、.ql-editor .ql-size-small进行删除
.ql-editor .ql-size-12px {
  font-size: 12px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  font-size: 12px;
}
.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-editor .ql-size-12px {
  font-size: 16px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  font-size: 16px;
}
.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-editor .ql-size-20px {
  font-size: 20px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  font-size: 20px;
}
.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';    
}

// 4. quill.core.css 
.ql-editor .ql-size-12px {
  font-size: 12px;
}
.ql-editor .ql-size-16px {
  font-size: 16px;
}
.ql-editor .ql-size-20px {
  font-size: 20px;
}

// 5. quill.snow.css
.ql-editor .ql-size-8px {
    font-size: 10px;
}
.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-item[data-value="10px"]::before {
    font-size: 10px;
}
....