ngx-quill 中字体选择器名称显示问题的解决方案

问题背景

在使用 ngx-quill 富文本编辑器时，开发者可能会遇到字体选择器中字体名称不显示的问题。虽然字体功能可以正常工作，但下拉菜单中只显示空白选项，给用户带来困惑。

问题分析

这个问题源于 Quill 编辑器本身对字体选择器的处理方式。当配置字体选项时，Quill 默认不会自动显示字体名称，需要通过 CSS 样式来手动指定每个字体选项的显示文本。

解决方案

1. 配置字体选项

首先，在组件中正确配置 Quill 的工具栏选项，包括字体选择器：

export const quillConfiguration = {
  toolbar: [
    // 其他工具栏选项...
    [{'font': ['aref', 'roboto', 'mirza', 'serif', 'monospace']}],
    // 其他工具栏选项...
  ]
}

2. 添加全局样式

在 Angular 的全局样式文件（通常是 styles.scss）中添加以下 CSS 规则：

/* 定义字体选择器中各选项的显示文本 */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=aref]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=aref]::before {
  content: 'Aref Ruqaa';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=roboto]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=roboto]::before {
  content: 'Roboto';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=mirza]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=mirza]::before {
  content: 'Mirza';
}

3. 配置 Quill 字体白名单

在应用模块中提供 Quill 配置，指定允许使用的字体：

provideQuillConfig({
  customOptions: [{
    import: 'formats/font',
    whitelist: ['mirza', 'roboto', 'aref', 'serif', 'monospace']
  }]
})

实现原理

1. CSS 伪元素：通过 ::before 伪元素为每个字体选项添加显示文本
2. 属性选择器：使用 [data-value=...] 属性选择器匹配特定的字体选项
3. content 属性：设置伪元素的内容为所需的字体名称

注意事项

1. 确保 CSS 规则添加到全局样式文件中，而不是组件样式文件
2. 字体名称的拼写需要与配置中的值完全一致
3. 对于每种字体，都需要添加对应的 CSS 规则

替代方案

虽然也可以通过自定义工具栏组件来解决这个问题，但上述 CSS 方案更为简洁，不需要修改现有组件结构。

总结

通过简单的 CSS 样式调整，可以轻松解决 ngx-quill 中字体选择器名称不显示的问题。这种方法保持了代码的简洁性，同时提供了良好的用户体验。