如何配置React-Quill使其输出内联样式而非默认class类名

方案1：修改Quill内置格式配置（推荐，从根源避免生成类名） #

Quill默认的富文本格式会输出类名来控制样式，我们可以直接替换内置的类名格式为内联样式格式，操作如下：

import Quill from 'quill';
// 引入Quill内置的样式版size属性
const SizeStyle = Quill.import('attributors/style/size');
// 配置允许的尺寸档位，和工具栏配置的size选项对应
SizeStyle.whitelist = ['small', false, 'large', 'huge'];
// 注册覆盖默认的类名版size属性
Quill.register(SizeStyle, true);

配置完成后，React-Quill生成的内容就会直接输出带style属性的标签，不会再生成ql-size-*类名，你示例中的场景会直接输出期望的<span style="font-size: 1.5em;">结构。
如果你需要自定义尺寸对应的具体大小，可以直接修改whitelist对应的值，比如改为['0.75em', '1em', '1.5em', '2.5em']，匹配你需要的样式即可。

方案2：正则替换输出的HTML字符串（适配存量内容场景） #

如果你已经有大量带Quill类名的存量内容，不想修改编辑器配置，可以通过正则匹配替换的方式将类名转换为内联样式：

// 提前定义Quill类名和对应内联样式的映射关系
const quillClassMap = {
  'ql-size-small': 'font-size: 0.75em;',
  'ql-size-large': 'font-size: 1.5em;',
  'ql-size-huge': 'font-size: 2.5em;',
  // 可继续添加其他需要转换的Quill类名，比如对齐、颜色相关的类
};

function transformQuillHtml(html) {
  return html.replace(/class="([\w\s-]+)"/g, (match, classStr) => {
    const classList = classStr.split(/\s+/);
    let style = '';
    const otherClasses = [];
    classList.forEach(cls => {
      if (quillClassMap[cls]) {
        style += quillClassMap[cls];
      } else {
        otherClasses.push(cls);
      }
    });
    const attrs = [];
    if (otherClasses.length) attrs.push(`class="${otherClasses.join(' ')}"`);
    if (style) attrs.push(`style="${style}"`);
    return attrs.join(' ');
  });
}

// 使用示例
const rawHtml = `<p>Pjhfdcjhad <span class="ql-size-large">jadhjvhgds</span> dsbjhvgdsz xv</p>`;
const resultHtml = transformQuillHtml(rawHtml);

注意事项 #

• 方案1的注册逻辑需要放在React-Quill组件初始化之前执行，否则不会生效。
• 两种方案的样式映射值都可以根据你的业务需求自定义调整，保持和原Quill样式的大小一致即可。

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