Ckeditor Angular2-编辑器使用_Ckeditor_Angular

Ckeditor Angular2-编辑器使用

ckeditor angular

Ckeditor Angular2-编辑器使用,ckeditor,angular,Ckeditor,Angular,如何将ckeditor与Angular2组件一起使用做一些类似于： 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. </

如何将ckeditor与Angular2组件一起使用

做一些类似于：

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 {

}

从'angular2/core'导入{Component}
@组成部分({
选择器：“e”，
模板：`
这是要用CKEditor替换的我的文本区域。
CKEDITOR.replace（'editor1'）；
`
})
出口E类{
}

并在index.html中打印它，如：

<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>


你好
System.config({
套餐：{
汇编：{
格式：'寄存器'，
defaultExtension:'js'
}
}
});
System.import（“../compiled/boot”）
.then（null，console.error.bind（console））；
哈卡顿来袭！
加载。。。

不起作用。当我将所有文本区域和脚本代码放在index.html中时，效果很好，但我真的希望将其放在组件模板中。这就像ckeditor在组件中时看不到textarea ID一样

如何使ckeditor插件与Angular2组件一起工作良好？谢谢

不要将脚本添加到模板中。用这个代替

import {Component} from 'angular2/core'

declare const window: any;

@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(){
       if(window.CKEDITOR) {
           window.CKEDITOR.replace('editor1');
       }
    }
}

ckeditor.component.ts

import {Component, Input} from 'angular2/core';

declare const window: any;

@Component({
  selector: 'CKEditor',
  template: `
     <textarea name="targetId" id="targetId" rows="rows" cols="cols">
         This is my CKEditor component.
     </textarea>
  `
})
export class CKEditorComponent {

    @Input() targetId;
    @Input() rows = 10;  //you can also give default values here
    @Input() cols;     

    constructor(){}

    ngOnInit(){
       if(window.CKEDITOR) {
           window.CKEDITOR.replace('editor1');
       }
    }
}

很好，但你到底在哪里找到的？如果我做不到的话，我在angular2网站上做错了。@MurhafSousli我们会使用ckeditor定义文件吗？还是像你说的那样导入它？在使用中需要帮助吗it@noor有了webpack，你就不需要了。@MurhafSousli我没有使用它webpack@BharatChauhan有人让CKEditorModule使用它

import {Component, Input} from 'angular2/core';

declare const window: any;

@Component({
  selector: 'CKEditor',
  template: `
     <textarea name="targetId" id="targetId" rows="rows" cols="cols">
         This is my CKEditor component.
     </textarea>
  `
})
export class CKEditorComponent {

    @Input() targetId;
    @Input() rows = 10;  //you can also give default values here
    @Input() cols;     

    constructor(){}

    ngOnInit(){
       if(window.CKEDITOR) {
           window.CKEDITOR.replace('editor1');
       }
    }
}

import * as CKEDITOR from 'CKEDITOR/PATH';   
.
.
ngOnInit(){
   CKEDITOR.replace( targetId );
}