Lexical编辑器：清理$generateHTMLfromNodes生成的冗余HTML

一、移除多余属性的方法 #

1. 移除<p>的dir="ltr" #

Lexical的ParagraphNode默认会输出dir属性，你可以通过自定义节点覆盖默认行为：

import { ParagraphNode } from 'lexical';

class CustomParagraphNode extends ParagraphNode {
  exportDOM() {
    const dom = super.exportDOM();
    const pElement = dom.element;
    pElement.removeAttribute('dir'); // 移除dir属性
    return dom;
  }

  static importDOM() {
    return ParagraphNode.importDOM();
  }
}

// 在编辑器配置中注册自定义节点
const config = {
  nodes: [CustomParagraphNode],
  // 其他配置...
};

2. 移除<em>的class="editor-text-strikethrough" #

这个class是Lexical默认StrikethroughNode的输出，同样自定义节点修改：

import { StrikethroughNode } from 'lexical';

class CustomStrikethroughNode extends StrikethroughNode {
  exportDOM() {
    // 直接返回<s>标签，内部不需要带class的<em>
    const s = document.createElement('s');
    return { element: s };
  }

  static importDOM() {
    return StrikethroughNode.importDOM();
  }
}

// 注册到编辑器配置
const config = {
  nodes: [CustomParagraphNode, CustomStrikethroughNode],
  // 其他配置...
};

二、疑问解析 #

为什么<p>内自动插入<span>？ #

Lexical用<span>来分隔纯文本块和带格式的文本块。比如你示例中"Hello "是无格式纯文本，后面"crazy frog"带删除线+斜体格式，Lexical会把无格式的文本单独用<span>包裹，避免格式标签嵌套混乱，确保编辑器内的格式状态和HTML输出一一对应。

为什么同时存在<i>和<em>？ #

这是因为你给文本叠加了两种格式：斜体（对应<i>）和删除线（Lexical默认用<em class="editor-text-strikethrough">）。Lexical的格式系统会为每种激活的格式生成对应的标签，叠加时就会出现嵌套。你可以通过自定义斜体节点（比如让斜体输出<em>而非<i>），或者调整删除线节点的输出，来合并成单一标签，避免冗余。

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