vue-quill-editor编辑器自定义字体

自定义字体

//quill编辑器的字体大小
var sizes = ['8px','10px', '12px', '14px','15px', '16px', '17px','18px', '20px', '22px', '24px', '26px', '32px', '48px']
    var Size = Quill.import('formats/size');  
    Size.whitelist = sizes; //将字体加入到白名单 
    Quill.register(Size, true);

// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction

  // [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [
    {
      size: sizes
    }
  ],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: fonts }],
  [{ align: [] }],
  ["link", "image", "video"],

  ["clean"] // remove formatting button
];

然而这样配置后无效

最后是通过 配置 Quill.import('attributors/style/size') 里面的才有效(还要配置对应的css和伪类)
//quill编辑器的字体大小
var sizes = ['12px', '14px', '16px', '18px', '20px', '24px', '36px']
let fontSizeStyle = Quill.import('attributors/style/size')
fontSizeStyle.whitelist = sizes
Quill.register(fontSizeStyle, true)