修改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