如何在QuillJS中为OL/UL元素添加ql-align对齐CSS类？

核心思路 #

绕开Quill默认将对齐类绑定到<li>的逻辑，通过扩展Quill的块级元素处理模块，直接将对齐类应用到父级<ol>/<ul>，同时确保格式能持久化，不受重渲染影响。

可行方案 #

1. 扩展Quill的Block模块（推荐）

直接修改Quill处理块级格式的核心逻辑，让对齐格式作用于列表容器而非列表项：

// 导入原生Block模块
const Block = Quill.import('blots/block');

class CustomBlock extends Block {
  // 重写格式读取逻辑，从父级列表获取对齐信息
  static formats(node) {
    const baseFormat = super.formats(node);
    // 仅处理列表项元素
    if (node.tagName !== 'LI') return baseFormat;

    const parentList = node.parentElement;
    if (!['OL', 'UL'].includes(parentList.tagName)) return baseFormat;

    // 提取父级列表的对齐类
    const alignClass = Array.from(parentList.classList).find(cls => cls.startsWith('ql-align-'));
    if (alignClass) {
      baseFormat.align = alignClass.split('-')[2];
    }
    return baseFormat;
  }

  // 重写格式应用逻辑，将对齐类添加到父级列表
  format(name, value) {
    if (name !== 'align' || this.domNode.tagName !== 'LI') {
      super.format(name, value);
      return;
    }

    const parentList = this.domNode.parentElement;
    if (!['OL', 'UL'].includes(parentList.tagName)) {
      super.format(name, value);
      return;
    }

    // 移除旧对齐类，添加新类
    parentList.classList.remove('ql-align-left', 'ql-align-center', 'ql-align-right');
    if (value) parentList.classList.add(`ql-align-${value}`);
  }
}

// 替换原生Block模块
CustomBlock.blotName = 'block';
CustomBlock.tagName = 'DIV';
Quill.register(CustomBlock, true);

该方案从Quill的核心渲染层修改逻辑，格式会被持久化到Delta中，不会因重渲染丢失。

2. 监听文本变化修正类名（应急方案）

如果无法扩展核心模块，可通过监听text-change事件，在用户操作后修正类名位置：

quill.on('text-change', (delta, oldDelta, source) => {
  // 仅处理用户触发的修改
  if (source !== 'user') return;

  const alignedItems = quill.root.querySelectorAll('li[class^="ql-align-"]');
  alignedItems.forEach(li => {
    const parentList = li.parentElement;
    if (!['OL', 'UL'].includes(parentList.tagName)) return;

    const alignClass = Array.from(li.classList).find(cls => cls.startsWith('ql-align-'));
    parentList.classList.add(alignClass);
    li.classList.remove(alignClass);
  });
});

注意：此方案可能存在微小延迟，且极端情况下（如批量编辑）可能出现类名丢失，仅作为临时替代。

3. 修正Delta序列化逻辑

确保保存和加载内容时，列表的对齐格式能正确映射：

// 序列化时，将父级列表的对齐格式同步到第一个列表项的Delta中
quill.on('selection-change', (range) => {
  if (!range) return;
  const lists = quill.root.querySelectorAll('ol[class^="ql-align-"], ul[class^="ql-align-"]');
  lists.forEach(list => {
    const alignType = list.classList[0].split('-')[2];
    const firstLi = list.querySelector('li');
    if (!firstLi) return;

    const index = quill.getIndex(firstLi);
    quill.formatText(index, 1, { align: alignType }, 'silent');
  });
});

配合扩展的Block模块，可确保内容保存和重新加载后，对齐类仍绑定在父级列表上。

内容的提问来源于stack exchange，提问作者Ajdin Bečirović