TinyMCE does not work in angular material Tabs

150 Views Asked by At

I'm working with angular material Tabs, into which I'm trying to integrate TinyMCE. Unfortunately, if the editor is in anything other than the first tab when loaded, it is only available in the first tab.

<mat-tab-group [preserveContent]="true">
  <mat-tab label="First"><tinymce [(ngModel)]="data1" [config]="config"></tinymce> </mat-tab>
  <mat-tab label="Second"><tinymce [(ngModel)]="data2" [config]="config"></tinymce></mat-tab>
  <mat-tab label="Third"><tinymce [(ngModel)]="data3" [config]="config"></tinymce> </mat-tab>
</mat-tab-group>

Of course, I have an editor in the component and I am listing it directly here so that the example is not long. The problem is still the same. Even when I click on the next item and back to the first one, tinyMCE stopped working, or the iframe content was deleted, empty header and body. I had to add [preserveContent]="true" to mat-tab-group.

I tried "MatTabsConfig", but to make each item load lazy , it works but is very uncomfortable

API Tabs is here: https://material.angular.io/components/tabs/api

Otherwise, it's completely error-free.

0

There are 0 best solutions below