在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中初始化第三方库

回答

相关问题