Angular mat-tab-group 和 tinyMCE

Question

我想在選項卡組上放置一個tinyMCE實例。 在一個選項卡上，我在另一個選項卡上有 tinyMCE，只是一個普通的textarea 。 切換選項卡會導致tinyMCE失敗並且內容不再可編輯 - 如果顯示tinyMCE 。 尋找解決方案我想出了以下內容：

  <mat-tab-group animationDuration="0ms" (selectedIndexChange)="unloadTinyMce($event)"
      (animationDone)="updateEditor()">
      <mat-tab label="HTML Cover">
        <editor id="tinyMCE" [init]="tinyMceSettings.defaultWithInlineImages" [ngModelOptions]="{standalone: true}"
          [(ngModel)]="myEntity.textHtml"></editor>
      </mat-tab>
      <mat-tab label="PDF Cover">
        <mat-form-field appearance="outline">
          <mat-label i18n>Text for PDF</mat-label>
          <textarea matInput rows="10" i18n-placeholder="Text for PDF" placeholder="Text for PDF"
            [(ngModel)]="myEntity.textText"> </textarea>
        </mat-form-field>
      </mat-tab>
    </mat-tab-group>

所以基本上遵循不同的提示，我應該在切換選項卡時卸載tinyMCE並在切換回來時加載。 當動畫結束時，內容會重新加載。 我發現它必須設置為0ms否則它將無法工作。

  unloadTinyMce(value): void {
    this.currentTabIndex = value;
    console.log('tab sel:' + value)
  }

  updateEditor() {
    console.log('finished animation ')
    if (this.currentTabIndex == 0) {
      const settings = Object.assign({}, TinyMceSettings.defaultWithInlineImages, { selector: '#tinyMCE' });
      tinymce.init(settings)
    } else {
      tinymce.remove('tinyMCE'); //the id of your textarea
    }
  }

所以，現在我有以下三個主要問題：

1. tinyMCE的內容不可編輯
2. 我不知道如何將內容綁定到ngModel - 特別是myEntity.textHTML
3. 有時它無法加載設置有時不會。 我想這是某種時機。

是否有工作代碼如何在mat-tab-group上使用tinyMCE ？

Answer 1

這是另一個簡單的解決方案：您可以延遲加載 mat-tab 內容。 當您更改選項卡時，這會強制重建選項卡的內容：

<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>

文檔： https : //material.angular.io/components/tabs/overview#lazy-loading

Answer 2

我僅關注Angular / tinyMCE組件中的StoryBook 。 該解決方案只是使用editor在mat-tab-group啟用或禁用組件，即

<mat-tab-group #tabGroup (selectedTabChange)="handleTabChange($event)">
  <mat-tab label="First Tab">
    <editor [(ngModel)]="firstEditorValue" *ngIf="activeTabIndex===0"></editor>
  </mat-tab>

  <mat-tab label="Second Tab">
    <editor [(ngModel)]="secondEditorValue" *ngIf="activeTabIndex===1"></editor>
  </mat-tab>
</mat-tab-group>

和

  @ViewChild('tabGroup', { static: false }) public tabGroup: any;
  public activeTabIndex: number | undefined = undefined;
  public firstEditorValue = '';
  public secondEditorValue = '';

  public handleTabChange(e: MatTabChangeEvent) {
    this.activeTabIndex = e.index;
  }

  public ngAfterViewInit() {
    this.activeTabIndex = this.tabGroup.selectedIndex;
  }

在stackblitz上也是一個可行的例子。 如果有人不想在github上先瀏覽並在這里偶然發現，這里的摘要只是為了清楚起見。