如何让PrimeNG Editor/ngx-quill生成内联样式而非类样式？

一、PrimeNG Editor（基于Quill）的处理方案 #

PrimeNG Editor封装了Quill，要让它生成内联样式而非类名，需要在Editor初始化后，重写Quill内置格式的渲染逻辑：

1. 在组件中获取Quill实例，覆盖目标格式的定义：

import { Editor } from 'primeng/editor';
import { ViewChild, AfterViewInit } from '@angular/core';

export class YourComponent implements AfterViewInit {
  @ViewChild(Editor) editor!: Editor;

  ngAfterViewInit() {
    const quill = this.editor.quill;
    
    // 重写粗体格式
    quill.formatters.bold = {
      inline: 'strong',
      style: { fontWeight: 'bold' }
    };
    // 重写斜体格式
    quill.formatters.italic = {
      inline: 'em',
      style: { fontStyle: 'italic' }
    };
    // 重写标题格式
    quill.formatters['header'] = (value: number) => ({
      tag: `h${value}`,
      style: { fontSize: `${1.2 + (value * 0.4)}rem`, fontWeight: '700' }
    });
    // 重写文字颜色
    quill.formatters.color = {
      inline: 'span',
      style: (value: string) => ({ color: value })
    };
    // 按需扩展其他格式：背景色、下划线、对齐等
  }
}

2. 注意：需要覆盖所有你用到的格式，未处理的格式仍会生成类样式。

二、ngx-quill的具体配置步骤 #

ngx-quill可通过customOptions直接替换Quill的格式器，实现内联样式输出：

1. 模板中配置组件：

<quill-editor
  [(ngModel)]="editorContent"
  [customOptions]="customQuillOptions"
></quill-editor>

2. 组件类中定义自定义配置：

import { QuillModules } from 'ngx-quill';

// 自定义格式器集合
const customFormatters = {
  bold: {
    inline: 'strong',
    style: { fontWeight: 'bold' }
  },
  italic: {
    inline: 'em',
    style: { fontStyle: 'italic' }
  },
  header: (value: number) => ({
    tag: `h${value}`,
    style: { fontSize: `${1.2 + (value * 0.4)}rem`, fontWeight: '700' }
  }),
  color: {
    inline: 'span',
    style: (value: string) => ({ color: value })
  },
  background: {
    inline: 'span',
    style: (value: string) => ({ backgroundColor: value })
  },
  align: (value: string) => ({
    block: 'div',
    style: { textAlign: value }
  })
};

// 组装ngx-quill配置
export class YourComponent {
  editorContent = '';
  customQuillOptions: QuillModules = {
    formats: ['bold', 'italic', 'header', 'color', 'background', 'align'],
    modules: {
      toolbar: [
        ['bold', 'italic'],
        [{ header: [1, 2, 3, false] }],
        [{ color: [] }, { background: [] }],
        [{ align: [] }]
      ],
      clipboard: {
        matchVisual: false // 关闭视觉匹配，确保内联样式优先
      }
    },
    customOptions: [
      { import: 'formats/bold', implementation: () => customFormatters.bold },
      { import: 'formats/italic', implementation: () => customFormatters.italic },
      { import: 'formats/header', implementation: () => customFormatters.header },
      { import: 'formats/color', implementation: () => customFormatters.color },
      { import: 'formats/background', implementation: () => customFormatters.background },
      { import: 'formats/align', implementation: () => customFormatters.align }
    ]
  };
}

3. 配置完成后，ngx-quill生成的HTML会自带内联样式，直接通过innerHTML绑定即可正常展示排版效果，无需额外引入Quill的样式文件。

内容的提问来源于stack exchange，提问作者Josh Garrison