基于Lexical.dev的最简Angular配置无响应且无报错，求排查原因

你遗漏了Lexical编辑器初始化的几个核心配置，Angular环境下还需要额外处理绑定逻辑，具体如下：

• 必须注册基础节点类型
  Lexical默认不会自动注册核心节点（比如文本、段落节点），手动导入并注册后，编辑器才能识别和渲染内容。修改代码：

  import { createEditor, LexicalEditor } from 'lexical';
  import { ParagraphNode, TextNode } from '@lexical/rich-text';
  
  // ... 组件代码
  private editor: LexicalEditor = createEditor({
    nodes: [ParagraphNode, TextNode]
  });
  

• 添加编辑器初始化内容与状态监听
  仅设置根元素不足以让编辑器工作，需要初始化空内容确保可输入，同时监听状态变化：
  在ngAfterViewInit中补充代码：

  ngAfterViewInit() {
    const el = this.editable?.nativeElement;
    if (el) {
      this.editor.setRootElement(el);
      // 初始化空段落，让编辑器具备输入能力
      this.editor.update(() => {
        const paragraph = new ParagraphNode();
        const text = new TextNode('');
        paragraph.append(text);
        this.editor.getRoot().append(paragraph);
      });
      // 监听编辑器状态，验证功能是否正常
      this.editor.registerUpdateListener(({ editorState }) => {
        console.log(editorState.toJSON());
      });
    }
  }
  

• 处理Angular与contenteditable的事件冲突
  Angular会拦截contenteditable的输入事件，需要手动绑定事件触发编辑器更新：
  修改模板：

  <div contenteditable="true" #editable (input)="onInput()"></div>
  

  在组件中添加对应方法：

  onInput() {
    this.editor.refresh();
  }
  

• 确认依赖安装完整
  检查是否安装了@lexical/core和@lexical/rich-text，若未安装执行：

  npm install @lexical/core @lexical/rich-text
  

完成以上配置后，编辑器即可正常响应输入。

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