Angular2 - CKEditor use

Viewed 9827

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

1 Answers
Related