如何在angular 2中添加TinyMce？

Question

我是新来的角2和试图整合tinymce角2，但我无法在我的项目中使用tinymce。到目前为止我所做的是我在我的项目中使用bower安装tinyMCe。所有js文件都成功添加到我的项目中。然后我说在如下页面布局的所有引用：

 <script src="~/lib/tinymce/tinymce.js"></script> 
     <script src="~/lib/tinymce/themes/modern/theme.js"></script> 
     <script src="~/lib/tinymce/plugins/link/plugin.js"></script> 
     <script src="~/lib/tinymce/plugins/paste/plugin.js"></script> 
     <script src="~/lib/tinymce/plugins/table/plugin.js"></script> 

在此之后，我写了组件在那里我将使用tineMce如下：

import { Component, OnInit } from "@angular/core"; 
import { Routes, RouterModule } from "@angular/router"; 
import { NgForm } from "@angular/forms"; 
import Page = require("../../interfaces/iPage"); 
import PageService = require("../../services/page.service"); 
@Component({ 
    //no need for selector as it will be loaded via routing 
    templateUrl: "/page/addEdit" 
}) 


export class AddEditPageComponent implements OnInit { 
    model = this.newModel(); 
    errorMessage: any; 
    tinymce: any; 

    constructor(private pageService: PageService.PageService) { 
     this.tinymce.init({ 
      selector: "[tinymce]" 
     }); 
    } 

    ngOnInit() { 

    } 

    newModel(): Page.IPage { 
     return { 
      pageId: 0, 
      pageName: null, 
      title: null, 
      content:null 
     }; 
    } 

    submitForm(form: NgForm) { 
     debugger; 
     this.pageService.save(this.model).subscribe(model => { 
      this.model = this.newModel(); 
     }, 
      null); 
    } 


} 

然后我在下面的HTML代码添加textarea的：

<textarea class="form-control" name="model.content" [tinymce]="tinymce" style="height: 300px" [(ngModel)]="model.content" placeholder="Description"></textarea> 

我的页面工作正常，当我不使用TinyMCE的，但是当我使用TinyMCE的，那么这个错误出现吊屏幕上： 模板解析埃罗rs： 无法绑定到'tinymce'，因为它不是'textarea'的已知属性。

如果我删除textarea的，但不要由init删除TinyMCE的那么这个错误出现： 类型错误：无法读取属性未定义

“初始化”我不知道我做错了。请帮助。

Answer 1

要在textarea上使用[tinymce]，您必须将其声明为新的输入属性。

import { Input } from '@angular/core'; 
@Component({....}) 
export class AppComponent { 
    @Input() tinymce: string; 
} 

TinyMCE会期待一个有效的CSS选择器，你可能想要听一些事件来支持活动绑定。

见下文全面实施

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

declare var tinymce: any; 

@Component({ 
    selector: 'my-app', 
    template: ` 
      <h3>Angular 2 Embedding TinyMCE</h3> 
      <textarea>Start Typing</textarea> 
      <p>{{ content }}</p> 
      ` 
}) 
export class AppComponent implements AfterViewInit, OnDestroy { 

    @Output() onEditorKeyup = new EventEmitter<any>(); 
    public editor:any; 

    ngAfterViewInit() { 
    tinymce.init({ 
     selector:'textarea', 
     setup: editor => { 
     this.editor = editor; 
     editor.on('keyup',() => { 
      const content = editor.getContent(); 
      this.onEditorKeyup.emit(content); 
     }) 
     } 
    }); 
    } 

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

} 

注意，在我的情况我已经从CDN加载TinyMCE的，所以我没有设置主题文件。

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>