When I change tabs tinyMCE angular lost the data and even I can not able to do edit again

Mitesh Dekate 0
Viewed 18
<mat-tab-group [selectedIndex]="selectedIndex" (selectedTabChange)="selectedIndex = $event.index">

          <mat-tab label="Instruction"></mat-tab>
<mat-tab label="test">
<div fxLayout="column" fxLayoutGap="5px" style="color: black;">
    <mat-label>Description of Problem</mat-label>
    <editor id="desOfProb" 
        formControlName="desOfProb" 
        [apiKey]="appSettings['tineMCE']['apiKey']" 
        [init]="appSettings['tineMCE']['init']">
    </editor> 
</div>
</mat-tab>
</mat-tab-group>

screenshot 1 screenshot 2

please see images and let me know if you have anything which I can try.

tinymce angular
1 Answers

I'm not an angular person so I can't give solutions but the editor is getting removed from the DOM. This causes the iframe that contains the editor content to lose all content and event handlers that the editor depends on.

The typical solution with tabs is to hide the editor using CSS styles, so add the style display: none to hide it and remove that style to show it, which will work with TinyMCE.

James Johnson0
Related