TinyMCE：保存编辑器内容后，Firefox 浏览器上出现 NS_ERROR_UNEXPECTED

Question

目前在 Firefox 浏览器上，当我们尝试重新加载具有tiny-mce编辑器的组件时，我们会看到 NS_ERROR_UNEXPECTED 消息，并且编辑器根本不显示任何内容。

第一次加载编辑器时，内容正确呈现，我们可以对其进行更改，在组件重新加载时保存更改后，我们收到 NS_ERROR_UNEXPECTED 错误，并且编辑器根本不显示任何内容。 只有当我们手动重新加载/刷新页面时，它才会开始显示内容。

它在 Google Chrome、Edge 和 Safari 等浏览器上也能正常运行，仅在 Firefox 中表现不佳。

我们使用的版本为“tinymce”：“^6.4.0”、“@tinymce/tinymce-angular”：“^6.0.1”和 Angular 13。这似乎也是以前版本中存在的问题，因为我们发现了一个 stackoverflow 问题，其中有人遇到了类似的问题：Getting 'NS_ERROR_UNEXPECTED' while using tinymce in Mozilla 我们尝试了答案中提供的解决方案，但它并没有为我们解决问题。 任何对此的帮助将不胜感激。

Answer 1

我也使用

"@tinymce/tinymce-angular": "^6.0.1"

遇到了这个错误。类似的情况，我们的 UI 允许用户关闭编辑器，并稍后重新打开它。

我没有一个优雅的解决方案，但我一起破解的一个是从服务中设置一个事件发射器，以便在消耗

RichTextEditorComponent

依赖项的组件 (

@tinymce/tinymce-angular

) 被销毁之前触发，订阅该事件，并使用以下代码手动删除编辑器。

if ((window as any).tinymce.activeEditor) (window as any).tinymce.activeEditor.remove();

处理导致

RichTextEditorComponent

被销毁的 UI 更新的服务会发出

EXIT_OVERLAY

订阅的

RichTextEditorComponent

事件，该事件会触发上述逻辑。下面更完整的代码片段（这是在

RichTextEditorComponent

的构造函数中：

this.uiManagerService.eventEmitter.subscribe((event: UIEvent) => {
  if(event.type === UIEventTypes.EXIT_OVERLAY){
    if ((window as any).tinymce.activeEditor) (window as any).tinymce.activeEditor.remove();
    //old editor now removed and will initialize correctly on next component construction
  }
});

如果它在

ngOnDestroy

钩子中工作，这会更干净，因为这基本上是我在这里一起编写的功能，但由于某种原因，当您将此逻辑放入

ngOnDestroy

处理程序中时，

tinymce

变量不会有一个

activeEditor

属性，即使 DOM 中同时存在多个编辑器实例，我认为这是问题的根本根源。

我希望这会有所帮助，我一整天都在努力寻找解决方案。

Answer 2

将 Firefox 浏览器升级到最新版本即116.0后此问题已解决 使用的版本是Angular 13， "tinymce": "^6.4.0", “@tinymce/tinymce-Angular”：“^6.0.1”