tinymce not initializing second time I enter the component

[linusanderas]

I have an Ionic-project and the first time when I enter a page/component tinymce loads just fine.

Next time when I visit the page the editor is not working. Does anyone has an idea of what it can be?

[linusanderas]

I "solved" it with this fix.

<editor *ngIf="_reload" >

public _reload = true;
ionViewWillEnter(){
setTimeout(() => this._reload = false);
setTimeout(() => this._reload = true);
}

Not my proudest moment as a developer but it works for now. If anyone can figure out a more permanent fix it would be appreciated.

[pfbristow]

I have a similar problem with using *ngIf on the editor tag. My situation is slightly more complicated, but it looks like the OP boiled it down to something pretty basic already. Maintainers please chime in if you need more info; I am happy to provide it.

I am a bit dumbfounded by this error. I thought Angular doesn't instantiate the component if the *ngIf statement is false, but I guess it does, as I get a big heaping couple errors in the console when TinyMCE isn't even supposed to be loading. A screenshot of them is attached here.

[x1c0]

same console errors for me... I have <editor> on one tab and it works as soon as I go to another tab and come back the editor does not work anymore..

[jscasca]

@linusanderas Do you have, by any chance, a small codesandbox replication we can use?

[sean-perkins]

@jscasca We've also ran into this.

On the second initialization, the iframe's body is empty. I cannot follow why it wouldn't even have the class mce-content-body.

I've debugged it down to this point: https://github.com/tinymce/tinymce/blob/9c01df42d50c4c3a9a89453d9f157afe657a32a9/modules/tinymce/src/core/main/ts/init/InitContentBody.ts#L386 where even here, the iframeHTML is correct, but isn't appended to the iframe's body.

Logging out the editor.getDoc(), refers to the correct document reference on first load, but refers to a non-visible document (based on Chrome's inspector) on the second load. I believe this is likely the culprit. Either the editor reference or the way in which the document is determined, is incorrect on the second load+.

[digeomel]

I ran into the same issue on a regular (i.e. non-Ionic) Angular app.
I solved it in a similar way as suggested by @linusanderas above.

@Component({
    template: '<editor *ngIf="loadTinyMce" [init]="tinyMceInit"></editor>'
})
export class MyComponent implements OnInit {
    loadTinyMce = false;
    tinyMceInit = {...};

    ngOnInit() {
        setTimeout(() => {
            this.loadTinyMce = true;
        }
    }
}

[exalate-issue-sync]

Ref: INT-2502

[solomon23]

Anyone find a fix for this ? I believe I'm running into the same issue. I found the timeout fixes it for me but it's based on network speed. Ie i need a 500ms timeout to make it go away. If i use the Chrome network throttler than 500ms gives me the script errors.

[tiny-james]

Seems like this might be the same issue in react:
tinymce/tinymce-react#204

If we can figure out the solution to one it'll probably fix both.

[Vispic2]

Here is my solution
this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => { console.log(event); setTimeout(() => (this.loadTinyMce = false)); setTimeout(() => (this.loadTinyMce = true)); });

[erosmazza]

same console errors for me... I have <editor> on one tab and it works as soon as I go to another tab and come back the editor does not work anymore..

have the same issue! router events are not fired with material tabs... and patching this other case by handling tab change event it is not a very good angular solution! The user has to wait for initialization each time he changes tab...

after editor initialization we could try something to call tinyMCE destroyer when tab is changed and editor does not exist anymore in the DOM, something like this:

 this._interval = setInterval(() => {
  this.checkDivNotRemoved();
}, 100);

  private checkDivNotRemoved() {
      let div = document.getElementById("editor_id"); // better test elemRef not by Id...
      if (!div) {
        this.editorRemove();
      }
  }

  private editorRemove() {
    clearInterval(this._interval);
  }

Is this a good workaround?

[tiny-stale-bot]

This issue is stale because it has been open 30 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 7 days.