如何使用Lexical Editor实现富文本内容的正确格式渲染？

针对你遇到的问题，下面直接给出两种渲染方案的分析和优化实践：

方案一：使用只读模式的Lexical编辑器渲染 #

优势 #

• 完美对齐编辑端的渲染逻辑，所有格式（代码高亮、表格样式、自定义节点等）都会原样保留，无需额外适配
• 后续扩展自定义节点时，无需额外修改展示逻辑，维护成本低
• 天然支持Lexical的部分交互特性（如链接跳转）

你的代码优化建议 #

当前代码加载了不少编辑相关的冗余插件，只读模式下可以移除，同时简化状态初始化逻辑：

export const MyEditor = (props: { content: string }) => {
  // 解析从数据库获取的序列化状态
  const parsedContent = JSON.parse(props.content);

  const initConfig = {
    namespace: 'MyEditor',
    theme: EditorTheme,
    onError(error: any) {
      throw error;
    },
    editorState: parsedContent,
    editable: false,
    nodes: [
      HeadingNode,
      ListNode,
      ListItemNode,
      QuoteNode,
      CodeNode,
      CodeHighlightNode,
      TableNode,
      TableCellNode,
      TableRowNode,
      AutoLinkNode,
      LinkNode
    ],
  };

  return (
    <LexicalComposer initialConfig={initConfig}>
      <RichTextPlugin 
        contentEditable={<ContentEditable />}
        placeholder={<div>Loading</div>}
        ErrorBoundary={LexicalErrorBoundary} 
      />
      {/* 仅保留展示必需的插件 */}
      <CodeHighlightPlugin />
      <LinkPlugin />
      <AutoLinkPlugin />
      <ListMaxIndentLevelPlugin maxDepth={7} />
    </LexicalComposer>
  );
};

方案二：转换为HTML节点渲染 #

优势 #

• 无需加载Lexical运行时，打包体积更小，页面加载速度更快
• 纯静态HTML渲染，性能更优，适合对加载速度要求高的场景

实现方法 #

利用Lexical提供的$generateHtmlFromNodes工具函数，将Lexical节点转换为HTML字符串后渲染：

import { $generateHtmlFromNodes } from '@lexical/html';
import { createEditor } from 'lexical';

export const RenderHtmlContent = (props: { content: string }) => {
  const editor = createEditor({
    nodes: [
      HeadingNode,
      ListNode,
      ListItemNode,
      QuoteNode,
      CodeNode,
      CodeHighlightNode,
      TableNode,
      TableCellNode,
      TableRowNode,
      AutoLinkNode,
      LinkNode
    ],
  });

  let htmlContent = '';
  try {
    const parsedState = JSON.parse(props.content);
    editor.setEditorState(parsedState);
    htmlContent = editor.update(() => {
      return $generateHtmlFromNodes(editor, null);
    });
  } catch (error) {
    console.error('Lexical状态转HTML失败:', error);
    htmlContent = '<div>内容加载失败</div>';
  } finally {
    editor.destroy();
  }

  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
};

方案选择建议 #

• 如果你的博客内容包含复杂格式（如自定义节点、代码高亮、嵌套表格），且希望最小化维护成本，优先选择只读模式的Lexical编辑器
• 如果内容格式简单，且追求极致的加载性能，可以选择HTML转换渲染，但需要注意适配自定义节点的转换逻辑

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