修改vue-quill-editor富文本默认的字体大小

效果如图： 1、导入quill

import Quill from "quill";

2、配置字体列表

let fontSizeStyle = Quill.import("attributors/style/size"); fontSizeStyle.whitelist = [ "12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px" ]; Quill.register(fontSizeStyle, true);

3、定义配置项（把size的值定义为fontSizeStyle.whitelist）

editorOption: { placeholder: "请在此输入文本...", modules: { toolbar: [ ["bold", "italic", "underline"], [{ header: 1 }, { header: 2 }], [{ list: "ordered" }, { list: "bullet" }], [{ indent: "-1" }, { indent: "+1" }], [{ direction: "rtl" }], [{ size: fontSizeStyle.whitelist }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }], [{ font: [] }], [{ align: [] }], ["link", "image"] ] } }

完整代码：

<template> <div class="container"> <quill-editor v-model="content" ref="myQuillEditor" class="ql-snow ql-editor" :options="editorOption" ></quill-editor> </div> </template> <script> import { quillEditor } from "vue-quill-editor"; import Quill from "quill"; let fontSizeStyle = Quill.import("attributors/style/size"); fontSizeStyle.whitelist = [ "12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px" ]; Quill.register(fontSizeStyle, true); export default { data() { return { content: "", editorOption: { placeholder: "请在此输入文本...", modules: { toolbar: [ ["bold", "italic", "underline"], [{ header: 1 }, { header: 2 }], [{ list: "ordered" }, { list: "bullet" }], [{ indent: "-1" }, { indent: "+1" }], [{ direction: "rtl" }], [{ size: fontSizeStyle.whitelist }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }], [{ font: [] }], [{ align: [] }], ["link", "image"] ] } } }; }, components: { quillEditor }, }; </script> <style lang="scss" scoped> .container { padding: 25px; } /deep/ .ql-container.ql-snow { min-height: 260px; } /deep/ .quill-editor.ql-snow.ql-editor { padding: 0; } /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: "12px"; } /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: "14px"; } /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: "16px"; } /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: "18px"; } /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: "20px"; } /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before, /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before { content: "22px"; } /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: "24px"; } /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before, /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { content: "26px"; } </style>

【富文本更多精彩内容】

参考文章：https://segmentfault.com/a/1190000021006629?utm_source=tag-newest