Angular CKEditor component
npm install ng2-ckeditorUse the CKEditor (4.x) wysiwyg in your Angular application.
* Include CKEditor javascript files in your application :
```
* Install ng2-ckeditor
* JSPM : jspm install npm:ng2-ckeditornpm install ng2-ckeditor
* NPM : yarn add ng2-ckeditor
* YARN:
* Install @types/ckeditor
* JSPM : jspm install npm:@types/ckeditornpm install --save @types/ckeditor
* NPM : yarn add @types/ckeditor
* YARN :
* 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)
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({ Some html
selector: 'sample',
template:
[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 = '
}
* config : The configuration object for CKEditor see http://docs.ckeditor.com/#!/api/CKEDITOR.configdebounce
* : You can add a delay (ms) when updating ngModelreadonly
* : Enabled / disable readonly on editor
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`
(click)="save($event)"
[icon]="'save.png'"
[label]="'Save Document'"
[toolbar]="'clipboard,1'">
* : Can be used to organize multiple buttons into groups.
`javascript`
[previous]="'1'">
* with ngFor
* [[CKEDITOR] Error code: editor-destroy-iframe](https://github.com/chymz/ng2-ckeditor/issues/24)
See LICENSE` file