Question

我正在尝试使用以下网址中的说明将TinyMCE编辑器嵌入到Angular2网络应用中：https://www.tinymce.com/docs/integrations/angular2/。

首先我得到了错误 - “找不到名字” 然后我在组件中添加了“ tinymce：any; ” - 只是为了得到错误“无法读取未定义的属性'init'”

我还在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);
  }
}

此致莫滕尼斯伦

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

Answer 2

我通过向tsconfig.app.json文件的include文件中添加types.d.ts文件来解决这些错误：

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

Angular 2中的tinymce编辑

2 个答案: