Angular2 - CKEditor use

Как использовать ckeditor с компонентом Angular2?Angular2 - CKEditor use

Делать что-то вроде:

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, когда он находится в компоненте.

Как я могу сделать плагин ckeditor полезным с компонентом Angular2? Спасибо

источник

2016-03-14 elzoy

Не добавляйте скрипт в свой шаблон. использовать это вместо

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:

Проверить 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); 
}

источник

2016-03-14 07:12:55

Отлично работает, но где именно вы его нашли? Я делаю что-то не так на сайте angular2, если не могу этого сделать. – elzoy

@elzoy Я обновил ответ –

@MurhafSousli будем использовать файл определения ckeditor или нам нужно импортировать его, как вы сказали? нужна помощь в использовании – noor

Angular2 - CKEditor use

ответ

Смежные вопросы