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

所以，现在我有以下三个主要问题：

tinyMCE的内容不可编辑
我不知道如何将内容绑定到 ngModel - 具体到 myEntity.textHTML
有时无法加载设置，有时不能。我想这是某种时机。

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

Answer 1

我简单地遵循了 Angular/tinyMCE 组件中的 StoryBook。该解决方案只是在 mat-tab-group 中启用或禁用具有 editor 的组件，即

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

On stackblitz 也是一个工作示例。如果其他人不想先看 github 并在这里绊倒，这里的摘要只是为了清楚起见。

Answer 2

一个简单的解决方案是延迟加载 mat-tab 内容。

这会在您更改标签时强制重建标签内容（和 tinyMCE）：

<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

Angular mat-tab-group 和 tinyMCE

Angular mat-tab-group and tinyMCE

tinymce

angular-material

angular