Angular 2+中Quill编辑器添加多字体失效问题求助

我之前也碰到过一模一样的问题！在Angular环境下给Quill加自定义字体，光配置工具栏选项根本不够，还得做两个关键操作：把字体注册到Quill的白名单里，再配上对应的CSS样式映射。下面是完整的解决步骤：

1. 明确配置Toolbar的字体选项 #

先把QuillModule.forRoot里的字体配置改成具体的字体列表，别再用空的[{ 'font': [] }]了：

QuillModule.forRoot({
  modules: {
    toolbar: [
      ['blockquote', 'code-block'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      [{ 'indent': '-1' }, { 'indent': '+1' }],
      [{ 'direction': 'rtl' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],
      // 这里换成你需要的具体字体，false保留默认字体选项
      [{ 'font': ['Arial', 'Verdana', 'Courier New', 'Georgia', false] }],
      [{ 'align': [] }],
      ['clean'],
      ['link', 'image']
    ]
  }
})

2. 注册自定义字体到Quill的白名单 #

Quill默认只认内置的几种字体，新字体必须手动注册到它的白名单里。在你的app.module.ts或者使用Quill的组件文件里加这段代码：

import Quill from 'quill';

// 导入Quill的Font格式模块
const Font = Quill.import('formats/font');
// 白名单里用小写名称，空格换成连字符，要和工具栏里的字体对应
Font.whitelist = ['arial', 'verdana', 'courier-new', 'georgia'];
// 注册修改后的Font模块
Quill.register(Font, true);

小提示：Quill会自动把工具栏里的字体名（比如Courier New）转换成courier-new这种格式作为CSS类名，所以白名单里的名称要和这个规则匹配。

3. 添加CSS样式映射 #

最后一步是给每个字体类配上对应的font-family，你可以把这段代码加在全局样式文件（比如styles.css）或者组件的样式文件里：

/* Quill自定义字体样式映射 */
.ql-font-arial {
  font-family: 'Arial', sans-serif;
}
.ql-font-verdana {
  font-family: 'Verdana', sans-serif;
}
.ql-font-courier-new {
  font-family: 'Courier New', monospace;
}
.ql-font-georgia {
  font-family: 'Georgia', serif;
}

为什么之前的方法没用？ #

普通Quill的教程往往没考虑Angular的模块初始化逻辑，也没强调必须显式注册字体到白名单。如果只配置工具栏，Quill根本识别不了这些新字体，自然会一直显示默认样式。按上面三步操作后，就能正常切换多种字体了！

内容的提问来源于stack exchange，提问作者Nouman Khalid