同一页面加载多个NgxEditor异常：仅最后一个编辑器正常工作

安全阿岳

2026-6-23

解决NgxEditor多实例共用导致的异常问题

问题根源

你遇到的问题核心是所有编辑器和菜单都绑定了同一个Editor实例。NgxEditor会基于每个实例维护独立的编辑器状态，共用实例会导致所有组件的状态都指向最后一个完成绑定的编辑器，因此只有它能正常加载，其他编辑器的菜单操作也会同步到它身上。

解决方案

为每个编辑器创建独立的Editor实例，分别绑定到对应的菜单和编辑器组件即可：

修改后的TS代码

import { Editor } from 'ngx-editor';
import { OnInit, OnDestroy } from '@angular/core';

export class myIpComponent implements OnInit, OnDestroy {
  htmlOne = '';
  htmlTwo = '';
  // 为每个编辑器创建独立实例
  public editorOne = new Editor();
  public editorTwo = new Editor();

  // 组件销毁时销毁编辑器实例，避免内存泄漏
  ngOnDestroy(): void {
    this.editorOne.destroy();
    this.editorTwo.destroy();
  }
}

修改后的HTML代码

<div class="NgxEditor__Wrapper">
    <ngx-editor-menu [editor]="editorOne"></ngx-editor-menu>
    <ngx-editor [editor]="editorOne" [(ngModel)]="htmlOne" [disabled]="false" [placeholder]="'Type here...'"></ngx-editor>
</div>
<div class="NgxEditor__Wrapper">
    <ngx-editor-menu [editor]="editorTwo"></ngx-editor-menu>
    <ngx-editor [editor]="editorTwo" [(ngModel)]="htmlTwo" [disabled]="false" [placeholder]="'Type here...'"></ngx-editor>
</div>