Angular 9中PrimeNG Quill Editor自定义字号设置失效问题求助

我之前在Angular升级后也碰到过一模一样的问题——字号下拉能正常显示，但选中后文本大小完全没变化，折腾了好一阵才搞定，给你分享几个亲测有效的解决步骤：

1. 调整Quill自定义配置的时机 #

你原来在constructor里注册字号配置，在Angular 9里这个时机太早了！Angular 9的模块加载机制和Angular 5差异很大，这时候Quill可能还没完全初始化完成。你需要把这段代码移到ngOnInit生命周期钩子中，确保Quill已经准备好：

import { Component, OnInit } from '@angular/core';
import * as Quill from 'quill';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit {

  ngOnInit(): void {
    // 先注销Quill默认的字号属性器，避免冲突
    const defaultSizeAttributor = Quill.import('attributors/style/size');
    Quill.unregister(defaultSizeAttributor);

    // 注册自定义字号配置
    const customFontSize = Quill.import('attributors/style/size');
    customFontSize.whitelist = [
      '8px', '9px', '10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px',
      '26px', '28px', '36px', '48px', '72px'
    ];
    Quill.register(customFontSize, true);
  }

  sample(event: any) {
    // 你的文本变更处理逻辑
  }
}

2. 强制字号样式生效 #

升级后PrimeNG的Quill样式优先级可能变高，导致自定义字号的style被覆盖。你需要在全局样式文件（比如styles.css）里添加以下代码，确保字号样式能正确应用：

/* 强制应用自定义字号样式 */
.ql-editor span[style*="font-size"] {
  font-size: inherit !important;
}

如果上面的代码效果不好，也可以针对每个字号写更具体的样式：

.ql-editor .ql-size-8px { font-size: 8px; }
.ql-editor .ql-size-9px { font-size: 9px; }
.ql-editor .ql-size-10px { font-size: 10px; }
/* 依次添加你需要的其他字号 */

3. 检查样式依赖是否正确引入 #

确认你的angular.json里已经正确引入了Quill和PrimeNG的样式文件，顺序也很重要：

"styles": [
  "node_modules/quill/dist/quill.snow.css",
  "node_modules/primeng/resources/themes/saga-blue/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "src/styles.css"
]

为什么Angular 5能用，Angular 9不行？ #

主要有两个核心原因：

• Angular 9的初始化流程和模块加载机制和Angular 5差异很大，constructor的执行时机更早，这时候Quill还没完成初始化，导致自定义配置没注册成功。
• PrimeNG在Angular 9对应的版本中升级了Quill依赖，默认的字号属性器优先级变高，直接覆盖了你的自定义配置，所以需要先注销默认的再注册自己的。

按照上面的步骤调整后，应该就能正常使用自定义字号了！

内容的提问来源于stack exchange，提问作者Ekta Shukla