如何在Quill.js中基于文本内容动态调整块元素的对齐方向？

核心思路 #

当编辑器文本内容变化时，检测每个块元素的文本是否包含RTL语言字符（如阿拉伯语、希伯来语），自动将包含RTL字符的块设置为右对齐，其余块保持左对齐（或默认对齐）。

实现步骤与代码 #

1. 初始化Quill编辑器

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [['align', ['left', 'center', 'right']]]
  }
});

2. 定义RTL字符检测函数

用正则匹配常见的RTL语言字符：

function hasRTLCharacters(text) {
  // 覆盖阿拉伯语、希伯来语、波斯语等主流RTL语言字符范围
  const rtlRegex = /[\u0590-\u08FF\uFB1D-\uFDFD\uFE70-\uFEFF]/u;
  return rtlRegex.test(text);
}

3. 监听文本变化并动态调整对齐

通过text-change事件触发处理逻辑，遍历所有块元素并更新对齐方式：

quill.on('text-change', () => {
  // 提取编辑器中所有块级内容的范围、文本和当前对齐格式
  const blocks = quill.getContents().ops.reduce((acc, op, index) => {
    if (op.insert && typeof op.insert === 'string') {
      const start = acc.length ? acc[acc.length - 1].end : 0;
      const end = start + op.insert.length;
      acc.push({
        start,
        end,
        text: op.insert,
        currentAlign: op.attributes?.align
      });
    }
    return acc;
  }, []);

  // 遍历块元素，根据内容调整对齐
  blocks.forEach(block => {
    const targetAlign = hasRTLCharacters(block.text) ? 'right' : 'left';
    if (block.currentAlign !== targetAlign) {
      // 用'user'标记操作来源，保留编辑历史
      quill.formatText(block.start, block.end, { align: targetAlign }, 'user');
    }
  });
});

优化说明 #

• 性能优化：可以利用text-change事件的delta参数，只处理发生变化的文本块，避免全量遍历
• 正则扩展：如果需要支持更多RTL语言，可扩展正则的字符范围
• 嵌套块处理：针对列表、引用等嵌套块元素，需调整块范围的提取逻辑，确保每个子块都能被正确检测

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