使用Ctrl+A清空NgxEditor后退格键失效问题求助

问题情况 #

使用Angular 14、ngx-editor 15.3.0和yarn 3.6.1开发时，遇到异常问题：按Ctrl+A全选再退格清空编辑器后，输入内容（比如hello），之后退格键完全无法使用，且控制台无任何报错信息。

可行的解决思路 #

1. 强制维护编辑器的非空基础结构 #

ngx-editor在被彻底清空（连空段落节点都丢失）后，内部文档状态可能出现异常。可以在内容变更时，确保编辑器始终保留一个空段落结构：

import { Component, ViewChild } from '@angular/core';
import { Editor, NgxEditorComponent } from 'ngx-editor';

@Component({
  selector: 'app-your-editor-component',
  templateUrl: './your-editor.component.html',
})
export class YourEditorComponent {
  @ViewChild(NgxEditorComponent) editorComp!: NgxEditorComponent;
  editor = new Editor();
  content = '<p></p>'; // 初始就设置空段落

  onContentUpdate(newContent: string) {
    // 检测到内容被彻底清空时，重置回带空段落的状态
    if (!newContent.trim() || newContent.trim() === '<p></p>') {
      this.content = '<p></p>';
    }
  }
}

对应的模板绑定内容变更事件：

<ngx-editor [editor]="editor" [(ngModel)]="content" (ngModelChange)="onContentUpdate($event)"></ngx-editor>

2. 调整ngx-editor版本 #

ngx-editor 15.3.0可能存在与Angular 14的兼容性bug，尝试降级到同大版本的稳定版（如15.2.0），执行命令：

yarn add ngx-editor@15.2.0

3. 手动监听键盘事件处理退格逻辑 #

如果上述方法无效，直接给编辑器容器添加键盘监听，强制处理退格行为：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Editor } from 'ngx-editor';

@Component({
  selector: 'app-your-editor-component',
  templateUrl: './your-editor.component.html',
})
export class YourEditorComponent {
  @ViewChild('editorWrap') editorWrap!: ElementRef;
  editor = new Editor();
  content = '<p></p>';

  ngAfterViewInit() {
    this.editorWrap.nativeElement.addEventListener('keydown', (e: KeyboardEvent) => {
      if (e.key === 'Backspace') {
        const currentContent = this.content.trim();
        // 当内容为空或仅存空段落时，重置状态并阻止默认退格行为
        if (currentContent === '' || currentContent === '<p></p>') {
          e.preventDefault();
          this.content = '<p></p>';
        }
      }
    });
  }
}

模板中给编辑器添加容器并绑定引用：

<div #editorWrap>
  <ngx-editor [editor]="editor" [(ngModel)]="content"></ngx-editor>
</div>

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