Angular2 – CKEditor使用

发布时间：2020-12-17 07:51:30 所属栏目：安全来源：网络整理

导读：我如何将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 {

}

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

不起作用.当我将所有带有脚本代码的textarea放在index.html中时,它工作得很好,但我真的想在组件模板中使用它.就像ckeditor在组件中看不到textarea ID一样.

如何使用Angular2组件使ckeditor插件正常工作？谢谢

不要将脚本添加到模板中.改用它

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');
       }
    }
}

更新：

检查angular2 lifecycle hooks,由于组件是javascript,您可以从组件内部执行任何脚本代码.

一个更好的方法,

实现一个将像这样使用的CKEDITOR组件

<CKEditor [targetId]="editor1" [rows]="10" [cols]="80"> </CKEditor>

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');
       }
    }
}

最好的办法,

获取CKEditor的打字稿定义文件,我发现它是here.
将它添加到您的项目中,之后您就可以使用该库了.

这仅用于说明,未经测试.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!