当标签在Angular 5中处于非活动状态时，tinymce Editor库文件不会加载

Question

我想在mat-tab上使用角度5的tinymce编辑器。但是，当标签处于非活动状态时，它无法加载tinymce编辑器所需的脚本文件。这是我的HTML代码

<mat-tab-group>
    <mat-tab label="Document Info">
        <p> This is document information </p>
    </mat-tab>
    <mat-tab label="Add Note">
        <div>
            <h3 for="post-body">Editor</h3>
            <text-editor [elementId]="'post-body' (onEditorKeyup)="onBody($event)">
            </text-editor>
        </div>
    </mat-tab>
</mat-tab-group>

Answer 1

在花了一些时间测试之后，我想出了一个简单的解决方案。请随时修改并为社区提供更好的解决方案，因为这个解决方案是一个快速的战术解决方案，而不是解决实际问题。

在组件文件的顶部，在导入下面添加以下声明：

declare var tinymce: any; 

在您的类中，创建新属性。

tabIndex: number;
content: string = ' '; 

将以下函数添加到您的类中。指定的tabIndex将是编辑器所在的选项卡。制表符索引从0开始(即第一个制表符)。

tabChanged() {
  if ( this.tabIndex == 1 ) {
    tinymce.execCommand("mceToggleEditor", false, 'content');
  } else {
    tinymce.remove();
  }
} 

将mat-tab-group元素更改为以下内容。

<mat-tab-group [(selectedIndex)]="tabIndex" (selectedTabChange)="tabChanged()">  

如果你的编辑器渲染的时候里面有一个文本区，确保你有一些默认的内容要加载，例如对于还没有值的记录的 。

<editor placeholder="Content" [(ngModel)]="content" name="content" id="content" #content [init]="{skin_url: '/assets/skins/lightgray', plugins: 'link,image', height: '450'}"></editor>  

就这样。

Answer 2

使用tinymce的多个实例

import 'tinymce/tinymce.min.js';
import 'tinymce/themes/modern/theme';
import '../assets/emoticons/plugin.js';
import 'tinymce/plugins/paste/plugin.js';
import 'tinymce/plugins/link/plugin.js';
import 'tinymce/plugins/autoresize/plugin.js';
import 'tinymce/plugins/image/plugin.js';
import 'tinymce/plugins/imagetools/plugin.js';
import 'tinymce/plugins/searchreplace/plugin.js';
import 'tinymce/plugins/autolink/plugin.js';
import 'tinymce/plugins/fullscreen/plugin.js';
import 'tinymce/plugins/media/plugin.js';
import 'tinymce/plugins/table/plugin.js';
import 'tinymce/plugins/hr/plugin.js';
import 'tinymce/plugins/insertdatetime/plugin.js';
import 'tinymce/plugins/advlist/plugin.js';
import 'tinymce/plugins/lists/plugin.js';
import 'tinymce/plugins/textcolor/plugin.js';
import 'tinymce/plugins/contextmenu/plugin.js';
import 'tinymce/plugins/colorpicker/plugin.js';
import 'tinymce/plugins/help/plugin.js';

declare var tinymce: any;


public notes = {
    selector: '#notes',
    height: 500,
    width: '40%',
    skin_url: 'skins/lightgray',
    plugins_url: '/test/',
    document_base_url: 'assets',
    plugins: [
      'emoticons',
      'paste',
      'link',
      'autoresize',
      'image',
      'imagetools',
      'searchreplace',
      'autolink',
      'fullscreen',
      'media',
      'table',
      'hr',
      'insertdatetime',
      'advlist',
      'lists',
      'textcolor',
      'contextmenu',
      'colorpicker',
      'help'
    ],
    toolbar1: 'newdocument fullscreen media | \
     emoticons | undo redo cut copy paste pastetext | \
     formatselect fontsizeselect subscript superscript | \
     bold italic strikethrough forecolor backcolor | link | \
     alignleft aligncenter alignright alignjustify  | \
     numlist bullist outdent indent  | removeformat | image | help',
    image_advtab: true,
    imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
    paste_data_images: true
  };


  public details = {
    selector: '#opportunity',
    height: 500,
    width: '40%',
    skin_url: 'skins/lightgray',
    plugins_url: '/test/',
    document_base_url: 'assets',
    plugins: [
      'emoticons',
      'paste',
      'link',
      'autoresize',
      'image',
      'imagetools',
      'searchreplace',
      'autolink',
      'fullscreen',
      'media',
      'table',
      'hr',
      'insertdatetime',
      'advlist',
      'lists',
      'textcolor',
      'contextmenu',
      'colorpicker',
      'help'
    ],
    // tslint:disable-next-line:max-line-length
    // toolbar2: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
    toolbar1: 'newdocument fullscreen media | emoticons | undo redo cut copy paste pastetext | \
    formatselect fontsizeselect subscript superscript | \
     bold italic strikethrough forecolor backcolor | link | \
     alignleft aligncenter alignright alignjustify  | \
     numlist bullist outdent indent  | removeformat | image | help',
    image_advtab: true,

    imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
    paste_data_images: true
  };



 public ngAfterViewInit(): void {

    tinymce.init(this.details); //to show on first tab initially

  }

mat- tab -group中的使用选项卡更改函数，将事件传递给它

<mat-tab-group #tabGroup (selectedTabChange)="tabSwitch($event)">

**然后处理该事件的函数会在初始化另一个实例之前删除先前的实例**

tabSwitch(tabEvent: MatTabChangeEvent) {
    switch (tabEvent.index) {

      case (0):
        tinymce.remove();
        tinymce.init(this.details);
        break;

      case (2):
        tinymce.remove();
        tinymce.init(this.notes);
        break;

      default:
        tinymce.remove();
        break;
    }
  }