Use the CKEditor (4.x) wysiwyg in your Angular application.
- Include CKEditor javascript files in your application :
<script src="https://cdn.ckeditor.com/4.16.1/full-all/ckeditor.js"></script>
-
Install ng2-ckeditor
- JSPM :
jspm install npm:ng2-ckeditor
- NPM :
npm install ng2-ckeditor
- YARN:
yarn add ng2-ckeditor
- JSPM :
-
Install @types/ckeditor
- JSPM :
jspm install npm:@types/ckeditor
- NPM :
npm install --save @types/ckeditor
- YARN :
yarn add @types/ckeditor
- JSPM :
-
SystemJS Config :
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 :
import { CKEditorModule } from 'ng2-ckeditor';
import { FormsModule } from '@angular/forms';
@NgModule({
// ...
imports: [CKEditorModule, FormsModule],
// ...
})
export class AppModule {}
Then use it in your component :
import { Component } from '@angular/core';
@Component({
selector: 'sample',
template: `
<ckeditor
[(ngModel)]="ckeditorContent"
[config]="{uiColor: '#99000'}"
[readonly]="false"
(change)="onChange($event)"
(editorChange)="onEditorChange($event)" <!-- CKEditor change 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">
</ckeditor>
`,
})
export class Sample {
ckeditorContent: string = '<p>Some html</p>';
}
config
: The configuration object for CKEditor see https://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 https://docs.ckeditor.com/#!/api/CKEDITOR.ui
<ckbutton>
: Note that thename
andcommand
attributes are mandatory for this one.
<ckeditor
[(ngModel)]="ckeditorContent">
<ckbutton [name]="'saveButton'"
[command]="'saveCmd'"
(click)="save($event)"
[icon]="'save.png'"
[label]="'Save Document'"
[toolbar]="'clipboard,1'">
</ckbutton>
</ckeditor>
<ckgroup>
: Can be used to organize multiple buttons into groups.
<ckeditor
[(ngModel)]="ckeditorContent">
<ckgroup
[name]="'documenthandling'"
[previous]="'1'">
<ckbutton .... ></ckbutton>
<ckbutton .... ></ckbutton>
</ckgroup>
</ckeditor>
See LICENSE
file