Angular 2 中的 tinymce 编辑器答案

【问题标题】：tinymce editor in Angular 2Angular 2 中的 tinymce 编辑器
【发布时间】：2016-10-25 14:23:01
【问题描述】：

我正在尝试使用此处的说明将 TinyMCE 编辑器嵌入 Angular2 Web 应用程序：https://www.tinymce.com/docs/integrations/angular2/。

首先我收到错误 - “找不到名称 tinymce”。
然后我在组件中添加了“tinymce: any;” - 只是为了得到错误“Cannot read property 'init' of undefined”

我还在 angular-cli.json 中添加了脚本并声明了变量 i typings.d.ts 文件 - 我在这里缺少什么？

import {
    Component,
    OnDestroy,
    AfterViewInit,
    EventEmitter,
    Input,
    Output
} from '@angular/core';

@Component({
    selector: 'simple-tiny',
    template: `<textarea id="{{elementId}}"></textarea>`
})
export class AppComponent implements AfterViewInit, OnDestroy {
  title = 'app works!';
  @Input() elementId: String;
  @Output() onEditorKeyup = new EventEmitter<any>();

  editor;
  tinymce: any;

  ngAfterViewInit() {
      this.tinymce.init({
          selector: '#' + this.elementId,
          plugins: ['link', 'paste', 'table'],
          skin_url: 'assets/skins/lightgray',
          setup: editor => {
              this.editor = editor;
              editor.on('keyup', () => {
                  const content = editor.getContent();
                  this.onEditorKeyup.emit(content);
              });
          },
      });
  }

  ngOnDestroy() {
      this.tinymce.remove(this.editor);
  }
}

问候莫滕·尼斯伦

【问题讨论】：

也许您的打字文件没有被读取。尝试在组件类中声明它。并摆脱类内的变量。
对不起，如果这是一个愚蠢的问题 - 但你是怎么做到的？（我对 Angular 很陌生）
declare var tinymce: any;。在@Component 之前添加
感谢您的帮助，现在可以使用了
我这样做了，它编译了，但现在它说Uncaught ReferenceError: tinymce is not defined.

标签： javascript angular tinymce

【解决方案1】：

用这段代码替换，应该可以了。你需要在类外声明tinymce。

import {
  Component,
  OnDestroy,
  AfterViewInit,
  EventEmitter,
  Input,
  Output
} from '@angular/core';

 declare const tinymce: any;

@Component({
  selector: 'simple-tiny',
  template: `<textarea id="{{elementId}}"></textarea>`
})
export class guiEditorComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: String;
  @Output() onEditorKeyup = new EventEmitter<any>();
  editor;


  constructor()
  {

  }

  ngAfterViewInit() {
    tinymce.init({
      selector: '#' + this.elementId,
      plugins: ['advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table contextmenu paste code'],
      skin_url: 'assets/skins/lightgray',
      setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
          const content = editor.getContent();
          this.onEditorKeyup.emit(content);
        });
      },
    });
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }
}

【讨论】：

此修复无效。甚至认为官方页面是这样说的。你能帮忙吗？

【解决方案2】：

我通过将 typings.d.ts 文件添加到 tsconfig.app.json 文件的包含来解决这些错误：

"include": [
    "src/*.ts",
    "src/**/*.ts",
    "src/**/*.d.ts",
    "typings.d.ts",
    "../node_modules/@nebular/**/*.ts"
  ]

【讨论】：