如何为Angular ngx-quill自定义类名式颜色选择器？

当然可以实现！要让Quill输出带自定义类名的<span>而非内联样式，我们需要自定义Quill的Blot（内容块）来替换默认的颜色格式化逻辑，同时调整工具栏配置匹配我们的自定义类。下面是一步步的实操方案：

1. 自定义Quill颜色Blot #

首先创建一个自定义Blot，用来处理类名样式替代内联style。在你的Angular组件文件（或单独的工具文件）中添加这段代码：

import Quill from 'quill';

// 导入Quill的基础内联Blot
const Inline = Quill.import('blots/inline');

class CustomColorBlot extends Inline {
  // 自定义格式名称，要和工具栏配置对应
  static blotName = 'custom-color';
  static tagName = 'SPAN';

  // 创建元素时的逻辑：移除默认style，添加对应颜色类
  static create(value: string) {
    const node = super.create(value) as HTMLElement;
    node.removeAttribute('style'); // 清除Quill默认加的内联样式
    if (value) {
      node.classList.add(value); // 直接添加传入的颜色类名
    }
    return node;
  }

  // 读取元素格式，用于同步工具栏选中状态
  static formats(node: HTMLElement) {
    return Array.from(node.classList).find(cls => 
      ['midnight-blue', 'crimson', 'orange', 'yellow'].includes(cls)
    ) || null;
  }

  // 切换格式时的逻辑：移除旧颜色类，添加新类
  format(name: string, value: string) {
    if (name === 'custom-color') {
      // 清除所有已有的颜色类
      ['midnight-blue', 'crimson', 'orange', 'yellow'].forEach(cls => {
        this.domNode.classList.remove(cls);
      });
      if (value) {
        this.domNode.classList.add(value);
      }
    } else {
      super.format(name, value);
    }
  }
}

// 注册自定义Blot，覆盖默认逻辑
Quill.register(CustomColorBlot, true);

2. 配置编辑器模块与工具栏 #

修改组件中的editorConfig，指定使用我们的自定义格式：

editorConfig = {
  toolbar: {
    container: [
      ['custom-color'] // 启用自定义颜色格式
    ],
    handlers: {
      // 自定义颜色选择的处理逻辑
      'custom-color': function(value) {
        if (value) {
          this.quill.format('custom-color', value);
        } else {
          // 空值时清除颜色格式
          this.quill.format('custom-color', false);
        }
      }
    }
  }
};

然后更新模板中的工具栏，把默认的ql-color替换为自定义的选择器，选项值直接用颜色类名：

<quill-editor 
  id="quill" 
  theme="snow" 
  placeholder="Your text here" 
  format="json" 
  [modules]="editorConfig" 
  [(ngModel)]="content" 
  (ngModelChange)="onModelChange()">
  <div quill-editor-toolbar>
    <div class="ql-formats">
      <!-- 类名要和blotName对应：ql- + blotName -->
      <select class="ql-custom-color">
        <!-- 选项值是颜色类名，style用来显示预览色块 -->
        <option value="midnight-blue" style="background-color: #00008b;"></option>
        <option value="crimson" style="background-color: #dc143c;"></option>
        <option value="orange" style="background-color: #ffa500;"></option>
        <option value="yellow" style="background-color: #ffff00;"></option>
        <!-- 空选项用于清除颜色 -->
        <option selected></option>
      </select>
    </div>
  </div>
</quill-editor>

3. 添加颜色类的CSS样式 #

在组件的styles.scss（或全局样式文件）中添加对应的颜色样式：

.midnight-blue {
  color: #00008b;
}
.crimson {
  color: #dc143c;
}
.orange {
  color: #ffa500;
}
.yellow {
  color: #ffff00;
}

4. 验证效果 #

现在你选择颜色后，Quill会输出完全符合你需求的HTML：

<span class="midnight-blue">Some text</span>

因为是类名而非内联样式，Angular的 sanitizer 不会移除这些样式，完美解决你的问题！

额外提示 #

• 确保已正确安装quill和ngx-quill，并在Angular模块中导入QuillModule
• 如果需要扩展更多颜色，只需在工具栏添加选项、更新Blot中的格式检测数组，再补充对应的CSS类即可
• 空选项可以让用户清除已设置的颜色格式

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