Файлы библиотеки редактора tinymce не загружаются, когда вкладка не активна в Angular 5

Question

Я хочу использовать редактор tinymce в Angular 5 на вкладке mat.Но когда вкладка неактивна, она не может загрузить файлы сценариев, которые потребуются для редактора 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

Использовать несколько экземпляров 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 используйте функцию изменения табуляции, передавая ей событие

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

Answer 2

Потратив некоторое время на тестирование, я пришел к простому решению.Пожалуйста, не стесняйтесь вносить изменения и предлагать лучшее решение для сообщества, поскольку это решение является скорее быстрым тактическим решением, чем решением актуальной проблемы.

В верхней части файла компонента, под импортом, добавьте следующее объявление:

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>  

Вот и все.