tinyMCE not working on mat-tab-group

[leomayer]

I place tinymce on a mat-tab-group like written on Stackoverflow. After switching the first time the tabs the content isn't any longer editable nor displayed at all.

Looking for solutions I didn't find any. Especially since the solutions are already aged or simply don't work. I see it as lack of documentation how to use them properly together with Material.

Using: Angular 8, tinyme-angular: 3.2.0

[SimonFc]

This is a known issue with tinymce-angular due to the usage of an iframe by TinyMCE. There's a Storybook example which illustrates one possible workaround. Let me know if you got any questions!

[leomayer]

Following the Storybook I have several problems with the sample:

1. Don't know what <editor-count></editor-count> should refer to. I guess its not crucial there I dropped it.
2. Following directly the sample I get an Angular-Error about expression changed after init. To fix it I change the sample to :

constructor(private cd: ChangeDetectorRef, ) {}
...
  public ngAfterViewInit() {
    this.activeTabIndex = this.tabGroup.selectedIndex;
    this.cd.detectChanges();
  }

.. Somehow the problem seems to be fixed if I do it the same way - although I have no clue why sometimes an error occurs and sometimes it fails... Anyway ...

[SimonFc]

Yeah you can ignore the editor-count component, it's just a helper to display the number of active editors.

Is your version exactly the same as the Storybook example? I just opened it up and I don't get any errors when switching tabs :thinking:

[leomayer]

Well... The Error is only when initiating the component... Some kind of debug-error that the expression has been changed after .... no error afterwards.

If I look in your example of #76 than you provide a link with a workaround. There the detectChanges() is included as well... Altough there it works as well without...

I think it won't harm to have an additional check therein...

[SimonFc]

Yeah that was an initial workaround that I came up with, and the Storybook example is a simpler one. If there's an issue with it I would like to know what it could be but I can't reproduce it :thinking:

[joelkesler]

You can also try lazy-loading the mat-tab content. That worked for me when dealing with this issue:

<mat-tab-group #tabGroup (selectedTabChange)="handleTabChange($event)">
  <mat-tab label="First Tab">
    <ng-template matTabContent>
      <editor [apiKey]="apiKey" [(ngModel)]="firstEditorValue"></editor>
    </ng-template>
  </mat-tab>

  <mat-tab label="Second Tab">
    <ng-template matTabContent>
      <editor [apiKey]="apiKey" [(ngModel)]="secondEditorValue"></editor>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Docs: https://material.angular.io/components/tabs/overview#lazy-loading

@SimonFc if this works better, would you be able to update the docs/storybook?

[msbhavana]

None of the above workarounds are viable for me. Any other fix/plan to fix has been made ?