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

我来帮你搞定这个问题！你之前遇到的字体不生效的情况，是因为Angular环境下的Quill（通常用ngx-quill封装）需要三步完整配置，光修改工具栏选项是不够的，得配合字体注册和样式设置才行。下面是具体的解决步骤：

1. 配置Quill工具栏的字体选项 #

首先在QuillModule.forRoot()里，把原来的[{ 'font': [] }]替换成你需要的具体字体列表，注意这里的字体值要和后续注册的名称对应（小写、短横线分隔）：

QuillModule.forRoot({
  modules: {
    toolbar: [
      // 其他工具栏选项...
      [{ 'font': ['arial', 'georgia', 'courier-new', 'comic-sans-ms'] }],
      // 其他工具栏选项...
    ]
  },
})

2. 注册自定义字体到Quill #

Quill默认只允许内置的几种字体，所以我们需要扩展它的字体白名单，在你的AppModule里添加以下代码：

import Quill from 'quill';

// 导入Quill的字体格式模块
const Font = Quill.import('formats/font');
// 设置允许的字体白名单，和工具栏里的选项对应
Font.whitelist = ['arial', 'georgia', 'courier-new', 'comic-sans-ms'];
// 注册修改后的字体模块
Quill.register(Font, true);

3. 添加全局CSS样式 #

Quill是通过CSS类来应用字体的，所以需要在全局样式文件（比如styles.scss或styles.css）里添加对应的样式，确保下拉菜单显示正确的字体预览，并且编辑器内容能应用字体：

/* 配置工具栏下拉菜单的字体显示 */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before {
  font-family: 'Arial', sans-serif;
  content: 'Arial';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before {
  font-family: 'Georgia', serif;
  content: 'Georgia';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before {
  font-family: 'Courier New', monospace;
  content: 'Courier New';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="comic-sans-ms"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="comic-sans-ms"]::before {
  font-family: 'Comic Sans MS', cursive;
  content: 'Comic Sans MS';
}

/* 配置编辑器内容的字体应用 */
.ql-font-arial {
  font-family: 'Arial', sans-serif;
}
.ql-font-georgia {
  font-family: 'Georgia', serif;
}
.ql-font-courier-new {
  font-family: 'Courier New', monospace;
}
.ql-font-comic-sans-ms {
  font-family: 'Comic Sans MS', cursive;
}

完整的AppModule示例 #

把上面的配置整合到你的AppModule里，大概是这样：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { QuillModule } from 'ngx-quill';
import Quill from 'quill';

// 注册自定义字体
const Font = Quill.import('formats/font');
Font.whitelist = ['arial', 'georgia', 'courier-new', 'comic-sans-ms'];
Quill.register(Font, true);

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    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': [] }],
          [{ 'font': ['arial', 'georgia', 'courier-new', 'comic-sans-ms'] }],
          [{ 'align': [] }],
          ['clean'],
          ['link', 'image']
        ]
      },
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样配置之后，你就能在Quill编辑器的工具栏里看到自定义的字体选项，选中后文本也会正确应用对应的字体了。

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