如何为ngx-quill工具栏添加<input type="color">颜色选择器并调整其CSS样式？

我之前在Angular项目里用ngx-quill的时候也碰到过一模一样的问题——好不容易把颜色选择器加上了，结果它直接跑到屏幕左上角，完全不跟着工具栏走！折腾了一阵终于搞定了，给你分享下完整的步骤：

第一步：集成到ngx-quill工具栏 #

首先得在组件里拿到Quill实例，然后手动给工具栏插入颜色选择器，还要绑定事件让选色能同步到文本格式：

1. 先在组件模板里写好quill-editor标签：

<quill-editor [modules]="quillModules" [(ngModel)]="editorContent"></quill-editor>

2. 然后在组件的TS文件里配置模块，并且在视图初始化完成后修改工具栏DOM：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { QuillEditorComponent } from 'ngx-quill';
import Quill from 'quill';

@Component({
  selector: 'app-my-editor',
  templateUrl: './my-editor.component.html',
  styleUrls: ['./my-editor.component.scss']
})
export class MyEditorComponent implements AfterViewInit {
  editorContent = '';
  @ViewChild(QuillEditorComponent) quillEditor!: QuillEditorComponent;

  // 配置Quill模块，保留你需要的工具栏选项
  quillModules = {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ 'color': [] }, { 'background': [] }] // 这是默认的颜色下拉，我们要在旁边加自定义选色器
    ]
  };

  ngAfterViewInit(): void {
    // 获取Quill核心实例和工具栏容器
    const quillInstance = this.quillEditor.quillEditor;
    const toolbarContainer = quillInstance.getModule('toolbar').container;

    // 1. 创建文字颜色选择器
    const textColorPicker = this.createColorPicker(quillInstance, 'color');
    // 2. 创建背景色选择器（如果需要的话）
    const bgColorPicker = this.createColorPicker(quillInstance, 'background');

    // 把选择器插入到对应的工具栏组后面
    const textColorGroup = toolbarContainer.querySelector('.ql-color');
    if (textColorGroup) textColorGroup.appendChild(textColorPicker);

    const bgColorGroup = toolbarContainer.querySelector('.ql-background');
    if (bgColorGroup) bgColorGroup.appendChild(bgColorPicker);
  }

  // 封装创建颜色选择器的工具方法，复用代码
  private createColorPicker(quill: Quill, formatType: 'color' | 'background'): HTMLInputElement {
    const colorInput = document.createElement('input');
    colorInput.type = 'color';
    colorInput.classList.add('quill-custom-color-picker');
    colorInput.value = formatType === 'color' ? '#000000' : '#ffffff'; // 设置默认值

    // 绑定选色事件，同步到Quill的文本格式
    colorInput.addEventListener('input', (e) => {
      const target = e.target as HTMLInputElement;
      quill.format(formatType, target.value, 'user');
    });

    return colorInput;
  }
}

第二步：调整CSS解决位置乱跑的问题 #

这一步是关键！默认的<input type="color">如果没做样式处理，很容易脱离工具栏布局。我们给它加样式，同时确保父容器是相对定位，把选择器“固定”在工具栏里：

在组件的SCSS文件里加这些样式：

/* 自定义颜色选择器的基础样式 */
.quill-custom-color-picker {
  margin: 0 4px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* 去掉浏览器默认的外观，统一样式 */
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
}

/* 针对WebKit内核浏览器调整颜色面板的样式 */
.quill-custom-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.quill-custom-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

/* 确保工具栏的颜色组是相对定位，防止选择器脱离布局 */
.ql-toolbar .ql-color,
.ql-toolbar .ql-background {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 给组加一点点内边距，让选择器和默认下拉按钮不挤在一起 */
  padding: 0 2px;
}

这样设置之后，颜色选择器就会乖乖待在工具栏的颜色按钮旁边，不会跑到屏幕左上角了！我当时就是因为一开始没给.ql-color加相对定位，导致选择器的定位参考是整个文档，才乱跑的，加了之后就完全正常了。

备注：内容来源于stack exchange，提问作者Mohammed Talha Tabrez