如何在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>