0

我想在 mat-tab 上使用 Angular 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>
4

2 回答 2

0

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

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

declare var tinymce: any;

在您的班级中，创建新属性。 

tabIndex: number;
content: string = '&nbsp;';

将以下函数添加到您的类中。指定的 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()">

如果您的编辑器在内部使用 textarea 进行渲染，请确保您有一些默认内容要加载，例如&nbsp;对于还没有值的记录。 

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

而已。

于 2018-10-04T21:28:49.953 回答
0

使用 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;
    }
  }
于 2018-12-04T22:20:49.683 回答