Angular2 - CKEditor使用 [英] Angular2 - CKEditor use
问题描述
我如何使用ckeditor与Angular2组件？
做类似于：
code> import'component'from'angular2 / core'
@Component（{
selector：'e'，
template：`
& textarea name =editor1id =editor1rows =10cols =80>
这是我的textarea将被CKEditor替换
< / textarea>
< script>
CKEDITOR.replace（'editor1'）;
< / script>
`
}）
export class E {
}
并在index.html中打印like：
< html>
< head>
< title> Hello< / title>
< script src =../ ckeditor / ckeditor.js>< / script>
< script src =../ systemjs / dist / system.src.js>< / script>
< script src =../ es6-shim / es6-shim.js>< / script>
< script src =../ angular2 / bundles / angular2-polyfills.js>< / script>
< script src =../ rxjs / bundles / Rx.js>< / script>
< script src =../ angular2 / bundles / angular2.dev.js>< / script>
< script src =../ angular2 / bundles / router.dev.js>< / script>
< script src =../ angular2 / bundles / http.dev.js>< / script>
< script src =http://fgnass.github.io/spin.js/spin.min.js>< / script>
< script>
System.config（{
packages：{
compiled：{
format：'register'，
defaultExtension：'js'
}
}
}）;
System.import（'../ compiled / boot'）
.then（null，console.error.bind（console））;
< / script>
< / head>
< body>
Hackathon来了！
< e>正在加载...< / e>
< / body>
< / html>
无法使用。它工作很好，当我把所有textarea与脚本代码在index.html，但我真的想有它在组件模板。这就像ckeditor在组件中没有看到textarea ID。
如何使ckeditor插件与Angular2组件一起工作？谢谢
不要在模板中添加脚本。使用这个来代替
import'component'from'angular2 / core'
@Component b $ b selector：'e'，
template：`
< textarea name =editor1id =editor1rows =10cols =80>
是我的textarea替换为CKEditor。
< / textarea>
`
}）
export class E {
constructor（）{}
ngOnInit（）{
window ['CKEDITOR'] ['replace']（'editor1'）;
}
}
更新： p>
检查angular2 生命周期钩子，因为组件是javascript，您可以从组件内部执行任何脚本代码。
更好的方法 p>
实施将用于此类的 CKEDITOR 组件
< CKEDITOR [targetId] =editor1[rows] =10[cols] =80> < / CKEDITOR>
CKEDITOR.ts
<
从'angular2 / core'导入{Component，Input}
@Component（{
selector：'CKEDITOR'，
template：`
< textarea name =targetIdid =targetIdrows =rowscols =cols>
这是我的CKEditor组件
< / textarea>
}）
export class CKEDITOR {
@Input（）targetId;
@Input（）rows = 10; //你也可以给这里的默认值
@Input（）cols;
constructor（）{}
ngOnInit（）{
window ['CKEDITOR'] ['replace']（targetId）;
}
}
最好的方法
获取CKEDITOR的typescript定义文件，我发现它此处。
将它添加到您的项目中，之后您将可以使用该库。
em>
$ CKDITOR / PATH'; import CKEDITOR from'CKEDITOR / PATH';
。
。
ngOnInit（）{
CKEDITOR.replace（targetId）;
}
How could I use ckeditor with Angular2 component?
Doing something like:
import {Component} from 'angular2/core'
@Component({
selector: 'e',
template: `
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
`
})
export class E {
}
and printing it in index.html like:
<html>
<head>
<title>Hello</title>
<script src="../ckeditor/ckeditor.js"></script>
<script src="../systemjs/dist/system.src.js"></script>
<script src="../es6-shim/es6-shim.js"></script>
<script src="../angular2/bundles/angular2-polyfills.js"></script>
<script src="../rxjs/bundles/Rx.js"></script>
<script src="../angular2/bundles/angular2.dev.js"></script>
<script src="../angular2/bundles/router.dev.js"></script>
<script src="../angular2/bundles/http.dev.js"></script>
<script src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<script>
System.config({
packages: {
compiled: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('../compiled/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
Hackathon incoming!
<e>Loading...</e>
</body>
</html>
doesn't work. It works good when I put all the textarea with script code in index.html but I really want to have it in component template. It's like the ckeditor doesn't see the textarea ID when it is in component.
How can I make ckeditor plugin working good with Angular2 component? Thank you
Don't add the script inside your template. use this instead
import {Component} from 'angular2/core'
@Component({
selector: 'e',
template: `
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
`
})
export class E {
constructor(){}
ngOnInit(){
window['CKEDITOR']['replace']( 'editor1' );
}
}
UPDATE:
Check angular2 lifecycle hooks, and since the components are javascript you can execute any script code from inside your component.
A better way,
implement a CKEDITOR component that will be used like this
<CKEDITOR [targetId]="editor1" [rows]="10" [cols]="80"> </CKEDITOR>
CKEDITOR.ts
import {Component, Input} from 'angular2/core'
@Component({
selector: 'CKEDITOR',
template: `
<textarea name="targetId" id="targetId" rows="rows" cols="cols">
This is my CKEditor component.
</textarea>
`
})
export class CKEDITOR {
@Input() targetId;
@Input() rows = 10; //you can also give default values here
@Input() cols;
constructor(){}
ngOnInit(){
window['CKEDITOR']['replace']( targetId );
}
}
The best way,
Get the typescript definition file for CKEDITOR, I found it here. Add it to your project, after that you will be able to use the library.
this is only for illustrating, not tested.
import CKEDITOR from 'CKEDITOR/PATH';
.
.
ngOnInit(){
CKEDITOR.replace( targetId );
}
这篇关于Angular2 - CKEditor使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
