TinyMCE保存内容后Firefox浏览器出现NS_ERROR_UNEXPECTED错误

1. 强制销毁组件时清理TinyMCE实例 #

Firefox对DOM节点回收机制与Chromium系浏览器不同，Angular组件销毁时易残留未解绑的编辑器实例。在组件的ngOnDestroy钩子中主动销毁实例：

import { Component, ViewChild, OnDestroy } from '@angular/core';
import { EditorComponent } from '@tinymce/tinymce-angular';

@Component({
  // 组件元数据
})
export class YourEditorComponent implements OnDestroy {
  @ViewChild(EditorComponent) editorComponent!: EditorComponent;

  ngOnDestroy(): void {
    if (this.editorComponent.editor) {
      // 传入true强制清理所有关联DOM节点
      this.editorComponent.editor.destroy(true);
    }
  }
}

2. 延迟初始化适配Firefox渲染逻辑 #

避免组件初始化阶段过早加载编辑器，改用AfterViewInit钩子添加Firefox专属延迟：

import { Component, AfterViewInit } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourEditorComponent implements AfterViewInit {
  editorInit: any = {
    // 你的TinyMCE配置
    plugins: 'advlist autolink lists link image charmap print preview anchor',
    toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
  };

  ngAfterViewInit(): void {
    if (navigator.userAgent.includes('Firefox')) {
      // 给Firefox留足DOM渲染时间
      setTimeout(() => this.initEditor(), 100);
    } else {
      this.initEditor();
    }
  }

  private initEditor(): void {
    // 动态设置编辑器内容或初始化逻辑
  }
}

3. 切换编辑器模式（若使用inline模式） #

部分Firefox版本对inline模式的DOM绑定存在兼容性问题，尝试切换为经典模式：

<!-- 原inline模式代码 -->
<editor [inline]="true" [init]="editorInit" [(ngModel)]="content"></editor>

<!-- 修改为经典模式 -->
<editor [inline]="false" [init]="editorInit" [(ngModel)]="content"></editor>

4. 升级依赖版本修复已知bug #

当前使用的@tinymce/tinymce-angular6.0.1在Angular13下存在Firefox专属兼容性问题，升级至兼容Angular13的稳定版本：

npm install @tinymce/tinymce-angular@^6.1.0 tinymce@^6.7.0 --save

5. 强制重建DOM节点规避复用问题 #

通过*ngIf控制编辑器容器的销毁与重建，确保每次重载都是全新DOM节点：

<div *ngIf="editorVisible">
  <editor [init]="editorInit" [(ngModel)]="content"></editor>
</div>

组件逻辑中添加重载触发逻辑：

reloadEditor(): void {
  this.editorVisible = false;
  setTimeout(() => {
    this.editorVisible = true;
    this.content = this.savedContent;
  }, 50);
}

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