无法在Vanilla JavaScript纯文本Lexical编辑器中输入文本求助

你的代码里存在两个核心问题导致无法正常输入：一是Lexical初始化后没有创建必要的初始输入节点，光标没有可附着的位置；二是没有等待编辑器完全就绪就完成配置，导致状态不同步。

以下是修复后的完整方案：

关键修改点 #

• 移除手动设置的contentEditable="true"，让Lexical自动管理编辑状态
• 等待编辑器就绪后，插入一个带空文本节点的段落，作为初始输入容器
• 可选：监听编辑器就绪事件实现自动聚焦

修复后的代码 #

<h1>Hello, Lexical!</h1>
<div id="editor" style="width: 100px; border: 1px solid #ccc; padding: 4px;"></div>
<script type="module">
import * as lexical from 'https://esm.run/lexical';
import { registerPlainText } from 'https://cdn.jsdelivr.net/npm/@lexical/plain-text@0.14.5/+esm';

const config = {
  namespace: 'MyEditor',
  editable: true,
};
const editor = lexical.createEditor(config);
const contentEditableElement = document.getElementById('editor');

// 注册纯文本插件
registerPlainText(editor);

// 设置编辑器根元素
editor.setRootElement(contentEditableElement);

// 在编辑器更新周期内插入初始段落节点
editor.update(() => {
  const paragraphNode = $createParagraphNode();
  const textNode = $createTextNode('');
  paragraphNode.append(textNode);
  $getRoot().append(paragraphNode);
});

// 可选：编辑器就绪后自动聚焦（不需要可删除此部分）
editor.addListener('editorReady', () => {
  editor.focus();
});
</script>

改动说明 #

1. 初始节点的必要性：Lexical基于节点系统工作，纯文本模式下必须存在至少一个段落节点，否则点击编辑器时，光标找不到有效的输入位置。通过editor.update创建节点，能确保Lexical的内部状态和DOM同步。
2. 自动管理contentEditable：手动设置contentEditable="true"会和Lexical的状态管理冲突，交由Lexical根据config.editable自动控制更可靠。
3. 编辑器就绪事件：editorReady事件确保编辑器完全初始化后再执行聚焦等操作，避免异步初始化导致的异常。

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