角度2にTinyMceを追加するには？

Question

私は角度2に新しいですし、角度2でtinymceを統合しようとしていますが、プロジェクトではtinymceを使用できません。私がこれまで行ってきたのは、自分のプロジェクトでバウアーを使って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のを使用する場合、このエラーが哀れむ画面上に来たときに私のページが正常に動作している： テンプレート解析ERRO rs： 'tinymce'は 'textarea'の既知のプロパティではないため、バインドできません。私はテキストエリアを除去するが、初期化からのTinyMCEを削除しない場合は

このエラーが来る： 例外TypeError：私は私が間違っているのかわからない未定義

の「initは」プロパティを読み取ることができません。 。親切に助けてください。

Answer 1

[tinymce]をテキストエリアに使用するには、新しい入力プロパティとして宣言する必要があります。

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

有効なCSSセレクタが必要です。ライブバインディングをサポートするために、いくつかのイベントを聞きたい場合があります。

私はセットアップにテーマファイルを持っていなかったので、私の場合、私はCDNからのTinyMCEをロードしていることを完全に実装

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

} 

注意以下を参照してください。

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