如何为Lexical富文本编辑器设置初始值并实现编辑？

核心实现方法 #

Lexical 设置初始值有三种常用方式，可根据你的组件类型、内容来源选择：

1. 使用 initialState 属性（首次渲染初始化推荐） #

这是最直接的初始化方式，需将初始内容转换为 Lexical 可识别的编辑器状态对象，借助 createEditorState 工具函数实现。

代码示例（函数组件）：

import { LexicalComposer, RichTextPlugin, ContentEditable } from '@lexical/react';
import { createEditorState, $getRoot, $createParagraphNode, $createTextNode } from 'lexical';

// 构建初始内容的函数
const getInitialState = () => {
  return createEditorState(() => {
    const root = $getRoot();
    root.clear(); // 清空编辑器默认内容
    
    // 添加普通文本段落
    const normalPara = $createParagraphNode();
    normalPara.append($createTextNode('这是 Lexical 编辑器的初始文本'));
    root.append(normalPara);

    // 添加带格式的文本段落（比如加粗）
    const boldPara = $createParagraphNode();
    const boldText = $createTextNode('这段是加粗的初始内容');
    boldText.format('bold', true);
    boldPara.append(boldText);
    root.append(boldPara);
  });
};

function MyEditor() {
  return (
    <LexicalComposer initialState={getInitialState()}>
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>开始输入...</div>}
      />
      {/* 可添加工具栏等其他插件 */}
    </LexicalComposer>
  );
}

2. 通过 editor.update 动态设置（异步内容加载场景） #

如果初始内容需要从接口异步获取，可在数据返回后调用 editor.update 更新编辑器内容：

代码示例：

import { useLexicalComposerContext } from '@lexical/react';
import { useEffect } from 'react';
import { $getRoot, $createParagraphNode, $createTextNode } from 'lexical';

function MyEditor() {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    // 模拟异步获取初始内容
    fetch('/api/fetch-editor-content')
      .then(res => res.json())
      .then(data => {
        editor.update(() => {
          const root = $getRoot();
          root.clear();
          // 将接口返回的文本转为 Lexical 节点
          const para = $createParagraphNode();
          para.append($createTextNode(data.content));
          root.append(para);
        });
      });
  }, [editor]);

  return (
    <LexicalComposer>
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>开始输入...</div>}
      />
    </LexicalComposer>
  );
}

3. 从序列化的 JSON 内容加载（复用已保存的编辑器内容） #

如果之前保存过 Lexical 导出的 JSON 格式内容，直接用 parseEditorState 解析后作为初始值：

import { parseEditorState } from 'lexical';
import { LexicalComposer, RichTextPlugin, ContentEditable } from '@lexical/react';

// 从后端获取的已保存编辑器内容
const savedEditorContent = '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"已保存的初始内容","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}';

const getInitialState = () => parseEditorState(savedEditorContent);

function MyEditor() {
  return (
    <LexicalComposer initialState={getInitialState()}>
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>开始输入...</div>}
      />
    </LexicalComposer>
  );
}

步骤化教程指引 #

1. 确定内容类型：根据初始内容是静态文本、异步接口数据还是已保存的 JSON，选择对应实现方法。
2. 编写内容构建逻辑：
   • 静态内容：用 createEditorState 配合 Lexical 节点 API（$createParagraphNode、$createTextNode 等）构建结构。
   • 异步内容：在组件挂载后，通过 editor.update 的回调函数操作节点。
   • JSON 内容：直接用 parseEditorState 解析序列化内容。
3. 验证渲染效果：启动项目后检查初始内容是否正确显示，带格式的内容需确认节点的 format 属性设置无误。
4. 调试常见问题：
   • 初始内容不显示：检查是否调用 root.clear() 清空了编辑器默认内容。
   • 节点操作无效：确保所有节点操作都在 createEditorState 或 editor.update 的回调函数内（Lexical 节点操作必须在编辑器更新上下文执行）。

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