2016-04-28 8 views
1

実際に私のアプリケーションにWYSIWYGエディタを実装しようとしています。サードパーティのライブラリを角2で初期化する

<!DOCTYPE html> 
<html> 
<head> 
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script> 
<script>tinymce.init({ selector:'textarea' });</script> 
</head> 
<body> 
<textarea>Easy! You should check out MoxieManager!</textarea> 
</body> 
</html> 

問題は次のとおりです。プログラムで、角2を使用してライブラリのinitメソッドを呼び出す方法はありますか?コンポーネント(ルートコンポーネント)で

答えて

2

ngOnInit():any { 
    tinymce.init(
     { 
     selector: ".tinyMCE", 
     }) 
    } 

が実際にangular2 wysiwyg tinymce implementation and 2-way-binding

+0

TY:この質問を参照してください!実際に私はこの実装を構築しましたが、私のコードは私には「ts」という名前を見つけることができませんでした。「tinymce」は見つかりませんでした。しかし、私はこれを実行し、それは本当に効果的です!タイ! –

0

も参照してください追加し、あなたがブートストラップコンポーネントにあなたのテキストエリアを配置する必要があります。 Angular2はコンポーネントベースのアプローチを使用しており、HTMLエントリファイルは評価されていないことを忘れないでください。コンポーネント内のテンプレートのみ。

ですから、あなたのHTMLファイルでこれを実行する必要があります。

<html> 
    <head> 
    <!-- includes --> 
    <!-- SystemJS configuration --> 
    </head> 
    <body> 
    <my-app></my-app> 
    </body> 
</html> 

そしてmy-appセレクタを持つコンポーネントブートストラップ:

bootstrap(AppComponent); 

を次にあなたはTinyMCEのを適用するカスタムディレクティブを実装することができますテキストエリアの動作:

@Component({ 
    selector: 'my-app', 
    (...) 
}) 
export class AppComponent implements OnInit{ 
    constructor(){} 
    ngOnInit():any { 
    tinymce.init({ 
     selector: "[tinymce]" 
    }); 
    } 
} 

フォームのサポート(コントロールとngModel)を活用し、さらに行くことができ

@Component({ 
    (...) 
    template: ` 
    <textarea tinymce style="height:300px"></textarea> 
    ` 
}) 
export class AppComponent { 
    (...) 
} 

注:該当するテキストエリアにTinyMCEの属性(あなたのディレクティブのセレクタ)。

関連する問題