Angular2 - CKEditor use

Question

How could I use ckeditor with Angular2 component?

Doing something like:

import {Component} from \'angular2/core\'

@Component({
  selector: \'e\',
           


        

Answer 1

Don't add the script to your template. use this instead

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

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

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 * as CKEDITOR from 'CKEDITOR/PATH';   
.
.
ngOnInit(){
   CKEDITOR.replace( targetId );
}