0

Currently on the firefox browser, when we try to reload our component which has the tiny-mce editor, we see NS_ERROR_UNEXPECTED message and the editor does not show any content at all.

On loading the editor for the first time, the content is rendered properly and we can make changes to it, after saving the changes when the component reloads, we receive NS_ERROR_UNEXPECTED error and the editor does not show any content at all. It only starts displaying the content back once we manually reload/refresh the page.

It behaves correctly on browsers like Google chrome, Edge and Safari as well, it's only misbehaving in case of Firefox.

We're using versions "tinymce": "^6.4.0", "@tinymce/tinymce-angular": "^6.0.1", and Angular 13. This seemed to be an existing issue in previous version as well because we found a stackoverflow question where someone faced a similar issue : Getting 'NS_ERROR_UNEXPECTED' while using tinymce in Mozilla We tried the solution provided in the answer, but it didn't solve the problem for us. Any help on this would be appreciated.

Kushagra Sharma
  • 1
  • 1

2 Answers2

0

I also ran into this error using "@tinymce/tinymce-angular": "^6.0.1". Similar situation where our UI allows users to close the editor, and re-open it later.

I don't have an elegant solution, but the one that I hacked together was to set up an event emitter from a service to fire before the component (RichTextEditorComponent) consuming the @tinymce/tinymce-angular dependency is destroyed, subscribe to that event, and use the following code to manually remove the editor.

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

The service handling my UI updates that cause RichTextEditorComponent to be destroyed emits a EXIT_OVERLAY event that RichTextEditorComponent subscribes to which triggers the logic above. More complete code snippet below (this is in the constructor for 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
  }
});

This would be much cleaner if it worked in an ngOnDestroy hook because this is basically the functionality I am hacking together here, but for some reason when you put this logic in the ngOnDestroy handler, the tinymce variable does not have a activeEditor attribute even though there being multiple editor instances in the DOM at once is what I understand to be the underlying source of the issue.

I hope this helps, I grappled with hacking together a solution to this all day.

Andrew Mckinnon
  • 11
  • 1
0

This issue was resolved after upgrading the Firefox browser to the latest version i.e. 116.0 Versions used are Angular 13, "tinymce": "^6.4.0", "@tinymce/tinymce-angular": "^6.0.1"

Sabarish Karrothu
  • 1