在Angular 2中初始化第三方庫

其實我試圖在我的應用程序上實現所見即所得的編輯器。網站上的示例有：在Angular 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>

問題是：如何以編程方式調用庫的使用Angular 2的init方法？

來源

2016-04-28 Marco Jr

在一個組件（根組件）添加

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

參見angular2 wysiwyg tinymce implementation and 2-way-binding

來源

2016-04-28 07:18:03

TY！實際上我構建了這個實現，但是我的vs代碼顯示了我[ts]無法找到名稱'tinymce' - 我認爲您建議的鏈接可能已過時。但我執行了這個..它真的有用！ ty！ –

事實上，你需要把你的textarea到你啓動一個組成部分。不要忘記，Angular2使用基於組件的方法，並且HTML條目文件不是「評估」的。只有組件中的模板。

所以，你需要做到這一點在你的HTML文件：

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

和引導具有my-app選擇組件：

bootstrap(AppComponent);

然後你就可以實現自定義指令適用TinyMCE的textarea字段的行爲：

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

只需添加TinyMCE的屬性（你的指令的選擇）到相應的textarea：

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

需要注意的是，你可以進一步去槓桿的形式支持（控制和ngModel）。看到這個問題：

angular2 wysiwyg tinymce implementation and 2-way-binding

來源

2016-04-28 07:39:51

在Angular 2中初始化第三方庫

回答

相關問題