如何将Tinymce与角4.0整合

时间:2017-12-27 08:57:29

标签: angular tinymce

我收到错误 SimpleTinyComponent不是NgModule

从中复制示例代码 “https://www.tinymce.com/docs/integrations/angular2/

为tinymce创建了一个组件,我基于TinyMCE的基本设置代码然后在Basic组件HTML上使用了tinymce的选择器。

Basic.component.ts现在只有console.log()。

我无法找到我错的地方。

我需要在同一页面上使用tinymce for multiple textarea。

  

tinymce.component.ts

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

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

  editor;

  ngAfterViewInit() {
    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() {
    tinymce.remove(this.editor);
  }
}
  

basic.component.html

<div>
  <h3>Embedding TinyMCE</h3>
  <simple-tiny
    [elementId]="'my-editor-id'"
    (onEditorKeyup)="keyupHandlerFunction($event)"
  >
  </simple-tiny>
</div>
  

App.module.ts

import {SimpleTinyComponent} from './component/email/tinymce.component';

@NgModule({
  declarations: [
    modalComponents
  ],
  imports: [
    HttpClientModule,
    FormsModule,
    AppRoutingModule,
    SimpleTinyComponent
]

0 个答案:

没有答案