处理wangEditor编辑器缩进问题

首行缩进处理方案总结

核心问题

• 要求：首行缩进固定为两个中文字符宽度

• 难点：字号变化、编辑器自动添加样式、增加/减少缩进功能冲突

解决思路

1. 精确测量方案

• 问题：em、ic 等单位在字号变化时不够精确

• 方案：使用 Canvas 动态测量字符宽度，转换为像素值

  // 测量中文字符宽度function measureCjkCharWidthPx(element) {// 查找第一个文本节点的实际字体大小// 使用 Canvas 测量字符宽度// 返回像素值}

2. 动态样式覆盖机制

• 问题：编辑器自动添加 text-indent: 2em 行内样式，优先级高

• 方案：使用 setProperty + !important 强制覆盖

    p.style.setProperty('text-indent', `${indentPx}px`, 'important');

  3. MutationObserver 监听策略

• 监听内容：
• text-indent 变化（覆盖编辑器自动添加）
• font-size 变化（段落本身和段落内元素如 span）
• class 变化（可能通过 CSS 类改变字号）
• 防抖：延迟 50ms 处理，避免频繁触发
• 识别变化类型：
• 段落本身变化
• 段落内元素（span）变化，需找到对应段落

• 4. 避免干扰

• 问题：增加/减少缩进功能被干扰
• 方案：
• 不在 handleChange 中自动处理缩进
• 只在 handleBlur 时处理
• MutationObserver 不监听 margin-left/padding-left（编辑器的块级缩进）

• 5. 处理逻辑分层

  function applyFirstLineIndentPx() {// 1. 排除列表、标题等// 2. 检测用户是否点击"减少缩进"（text-indent: 0）// 3. 检测是否有块级缩进（margin-left/padding-left > 0）// 4. 默认情况：测量字符宽度，设置为两字宽
  }

  关键代码结构

  // 1. 测量函数：动态获取字符宽度
  measureCjkCharWidthPx(element) → 像素值// 2. 应用函数：根据规则设置缩进
  applyFirstLineIndentPx() → 更新所有段落// 3. 监听机制：MutationObserver + 防抖
  observer.observe(editable, {attributes: true,attributeFilter: ['style', 'class'],attributeOldValue: true,subtree: true
  })// 4. 事件处理：只在失焦时处理
  handleBlur() → 延迟应用规则