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
有时无法加载设置，有时无法加载。我想那是某种时机。

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

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

在stackblitz上也是一个有效的示例。如果有人不想在github上先浏览并在这里迷路，这里的摘要只是为了清楚起见。

角垫组和tinyMCE

1 个答案: