React中点击外部元素聚焦指定Lexical实例并插入文本的问题

核心思路是提前保存当前激活的Lexical编辑器实例，避免点击按钮时因失焦找不到实例的问题。以下是针对类组件的具体实现步骤：

1. 在类组件的state中添加状态，用于存储当前激活的编辑器实例

constructor(props) {
  super(props);
  this.state = {
    activeEditor: null,
  };
}

2. 给每个Lexical编辑器配置onCreate回调，注册focus监听，更新激活的编辑器实例
   当编辑器初始化时，通过onCreate获取到editor实例，然后监听其focus事件，将当前实例存入state：

<LexicalComposer
  initialConfig={{
    onCreate: (editor) => {
      // 注册focus监听，聚焦时标记为当前激活编辑器
      editor.registerListener('focus', () => {
        this.setState({ activeEditor: editor });
      });
      
      // 可选：注册blur监听，失焦时清空（根据需求选择）
      // editor.registerListener('blur', () => {
      //   if (this.state.activeEditor === editor) {
      //     this.setState({ activeEditor: null });
      //   }
      // });
    },
    // 其他必要配置（如nodes、theme等）
  }}
>
  {/* 编辑器的配套组件（RichTextPlugin、ContentEditable等） */}
</LexicalComposer>

3. 外部按钮的点击事件中，使用保存的activeEditor执行插入操作
   点击按钮时，直接调用已保存的editor实例的update方法，无需先聚焦（插入后可按需重新聚焦）：

handleInsertText = () => {
  const { activeEditor } = this.state;
  if (!activeEditor) return;

  // 执行文本插入逻辑
  activeEditor.update(() => {
    const selection = $getSelection();
    // 确保是范围选择（光标位置属于范围选择的一种）
    if ($isRangeSelection(selection)) {
      $insertText('你要插入的文本内容');
    }
  });

  // 可选：插入完成后重新聚焦编辑器，保持编辑状态
  activeEditor.focus();
};

关键说明 #

• Lexical的editor实例是稳定的，只要组件未卸载，实例就会保持有效，因此存入state是安全的
• 无需依赖useLexicalComposerContext或已弃用的forwardRef，通过onCreate回调直接获取实例是官方推荐的方式
• 若点击按钮时编辑器已失焦，只要activeEditor状态未被清空，依然可以调用update修改内容，之后再调用focus()即可恢复光标位置

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