如何让Quill编辑器使用内联样式设置颜色与背景色

Quill默认通过自带类（比如ql-color-xxx、ql-bg-xxx）设置颜色和背景色，这类样式在邮件等无Quill样式依赖的场景下失效，要改成内联样式可以通过自定义格式化模块实现：

1. 自定义Color和Background格式化器 #

创建自定义的格式化类，重写format和remove方法，直接操作DOM的style属性：

// 自定义颜色格式化器
class InlineColor extends Quill.import('formats/color') {
  static format(name, value) {
    if (value) {
      return { style: { color: value } };
    }
    return {};
  }
}

// 自定义背景色格式化器
class InlineBackground extends Quill.import('formats/background') {
  static format(name, value) {
    if (value) {
      return { style: { backgroundColor: value } };
    }
    return {};
  }
}

2. 注册自定义模块并初始化Quill #

替换Quill默认的color和background模块，然后初始化编辑器：

// 注册自定义格式化器
Quill.register({
  'formats/color': InlineColor,
  'formats/background': InlineBackground
}, true);

// 初始化Quill编辑器
const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      [{ 'color': [] }, { 'background': [] }], // 保留颜色选择器
      // 其他工具栏选项...
    ]
  }
});

3. 验证效果 #

此时在编辑器中设置颜色或背景色，生成的HTML会直接带有内联style属性（比如<span style="color: #ff0000;">红色文本</span>），而非依赖Quill的类名，这样导出的HTML在邮件中就能正常显示颜色效果了。

如果需要支持自定义颜色输入（比如颜色选择器的自定义值），上述代码同样适用，Quill的颜色工具栏会自动将选中的颜色值传入格式化器。

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