0

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.

Dalibor Adamec
  • 1
  • what about your "tinymce" component?. The [officials docs](https://www.tiny.cloud/docs/integrations/angular/#tinymceangularintegrationquickstartguide) are about "editor". If you're using another library take account that mat-tab makes that only are "visible" the active tab -the others are under a *ngIf so they are unreachable-. You can simulate a mat-tab with the elements reachable like this [SO](https://stackoverflow.com/questions/68129174/how-to-force-mat-tab-body-to-render-bind-html-element-for-inactive-tab/68129729#68129729) – Eliseo Apr 27 '23 at 10:34

0 Answers0