Angular - CKEditor component

Use the CKEditor (4.x) wysiwyg in your Angular application.

Demo

$3

* Include CKEditor javascript files in your application :

``

`

* Install ng2-ckeditor

* JSPM : jspm install npm:ng2-ckeditor
* NPM : npm install ng2-ckeditor
* YARN: yarn add ng2-ckeditor

* Install @types/ckeditor

* JSPM : jspm install npm:@types/ckeditor
* NPM : npm install --save @types/ckeditor
* YARN : yarn add @types/ckeditor

* SystemJS Config :

`javascript
System.config({
map: {
'ng2-ckeditor': 'npm:ng2-ckeditor',
},
packages: {
'ng2-ckeditor': {
main: 'lib/index.js',
defaultExtension: 'js',
},
},
});
`

* Please consider usage of the plugin divarea of CKEditor (see Issues)

$3

Include CKEditorModule in your main module :

`javascript
import { CKEditorModule } from 'ng2-ckeditor';
import { FormsModule } from '@angular/forms';

@NgModule({
// ...
imports: [CKEditorModule, FormsModule],
// ...
})
export class AppModule {}
`

Then use it in your component :

`javascript
import { Component } from '@angular/core';

@Component({
selector: 'sample',
template:
[(ngModel)]="ckeditorContent"
[config]="{uiColor: '#99000'}"
[readonly]="false"
(change)="onChange($event)"
(editorChange)="onEditorChange($event)"
(ready)="onReady($event)"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
(contentDom)="onContentDom($event)"
(fileUploadRequest)="onFileUploadRequest($event)"
(fileUploadResponse)="onFileUploadResponse($event)"
(paste)="onPaste($event)"
(drop)="onDrop($event)"
debounce="500">

,
})
export class Sample {
ckeditorContent: string = '

Some html

';
}
`

$3

* config : The configuration object for CKEditor see http://docs.ckeditor.com/#!/api/CKEDITOR.config
* debounce : You can add a delay (ms) when updating ngModel
* readonly : Enabled / disable readonly on editor

$3

You can use the following directives to add custom buttons to CKEditor's toolbar and organize them into groups.
For more info about CKEditor's Toolbar API refer to http://docs.ckeditor.com/#!/api/CKEDITOR.ui

* : Note that the name and command attributes are mandatory for this one.

`javascript
[(ngModel)]="ckeditorContent">
[command]="'saveCmd'"
(click)="save($event)"
[icon]="'save.png'"
[label]="'Save Document'"
[toolbar]="'clipboard,1'">


`

* : Can be used to organize multiple buttons into groups.

`javascript
[(ngModel)]="ckeditorContent">
[name]="'documenthandling'"
[previous]="'1'">




`

$3

* with ngFor
* [[CKEDITOR] Error code: editor-destroy-iframe](https://github.com/chymz/ng2-ckeditor/issues/24)

$3

See LICENSE` file