Angular中切换标签页时TinyMCE内容消失且编辑器失效

1. 开启标签缓存，避免组件被销毁 #

IgniteUI的igx-tab-group默认会销毁非活动标签内的组件，导致TinyMCE实例直接失效，切换回来时无法正常重建。直接给标签组添加keepContent="true"属性，让非活动标签的DOM结构保留下来：

<igx-tab-group [keepContent]="true">
  <igx-tab label="标签页1">
    <!-- 你的TinyMCE编辑器组件 -->
  </igx-tab>
  <igx-tab label="标签页2">
    <!-- 另一个TinyMCE编辑器组件 -->
  </igx-tab>
</igx-tab-group>

这是最直接的解决方案，多数场景下能解决问题。

2. 手动管理TinyMCE实例的生命周期 #

如果开启缓存后仍有问题，就手动控制每个标签页内编辑器的销毁与重建，切换时保存内容、切回时重新加载：

• 监听标签组的selectedIndexChange事件
• 切换离开时，保存当前编辑器的内容并销毁实例
• 切换回来时，重新初始化编辑器并载入保存的内容

示例代码：

import { Component, ViewChild, ElementRef, OnDestroy } from '@angular/core';
import tinymce from 'tinymce';

@Component({
  selector: 'app-tabbed-editors',
  templateUrl: './tabbed-editors.component.html'
})
export class TabbedEditorsComponent implements OnDestroy {
  @ViewChild('editor1') editor1El: ElementRef;
  @ViewChild('editor2') editor2El: ElementRef;

  // 保存两个编辑器的内容
  editor1Content = '';
  editor2Content = '';
  // 保存编辑器实例引用
  private editor1Inst: any;
  private editor2Inst: any;

  onTabSwitch(index: number) {
    if (index === 0) {
      // 切换到标签1：处理标签2的编辑器
      if (this.editor2Inst) {
        this.editor2Content = this.editor2Inst.getContent();
        this.editor2Inst.remove();
        this.editor2Inst = null;
      }
      // 初始化标签1的编辑器（未初始化时）
      if (!this.editor1Inst) {
        this.editor1Inst = tinymce.init({
          target: this.editor1El.nativeElement,
          initialValue: this.editor1Content,
          // 你的其他TinyMCE配置项
        });
      }
    } else {
      // 切换到标签2：处理标签1的编辑器
      if (this.editor1Inst) {
        this.editor1Content = this.editor1Inst.getContent();
        this.editor1Inst.remove();
        this.editor1Inst = null;
      }
      // 初始化标签2的编辑器（未初始化时）
      if (!this.editor2Inst) {
        this.editor2Inst = tinymce.init({
          target: this.editor2El.nativeElement,
          initialValue: this.editor2Content,
          // 你的其他TinyMCE配置项
        });
      }
    }
  }

  // 组件销毁时清理所有编辑器实例
  ngOnDestroy() {
    this.editor1Inst?.remove();
    this.editor2Inst?.remove();
  }
}

对应模板：

<igx-tab-group (selectedIndexChange)="onTabSwitch($event)">
  <igx-tab label="标签页1">
    <textarea #editor1></textarea>
  </igx-tab>
  <igx-tab label="标签页2">
    <textarea #editor2></textarea>
  </igx-tab>
</igx-tab-group>

3. 强制触发Angular变更检测 #

有时候切换标签后，Angular的变更检测未及时触发，导致TinyMCE无法正常渲染。可以在切换事件中调用ChangeDetectorRef的detectChanges()方法：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

onTabSwitch(index: number) {
  // 上述逻辑代码...
  this.cdr.detectChanges();
}

4. 规范TinyMCE懒加载时机 #

如果使用TinyMCE懒加载，要确保初始化编辑器前脚本已加载完成。可以将加载逻辑封装为Promise，等待脚本加载完毕再初始化：

private loadTinyMCE(): Promise<void> {
  return new Promise(resolve => {
    if (window.tinymce) {
      resolve();
      return;
    }
    // 动态加载TinyMCE脚本
    const script = document.createElement('script');
    script.src = 'https://cdn.tiny.cloud/1/你的API_KEY/tinymce/6/tinymce.min.js';
    script.onload = () => resolve();
    document.head.appendChild(script);
  });
}

// 初始化编辑器前等待脚本加载完成
async initEditor(target: ElementRef, content: string) {
  await this.loadTinyMCE();
  return tinymce.init({
    target: target.nativeElement,
    initialValue: content
  });
}

内容的提问来源于stack exchange，提问作者happyfirst