Awesome

Angular - CKEditor component

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

<a name="install"></a>Installation

Include CKEditor javascript files in your application :

<script src="https://cdn.ckeditor.com/4.19.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
Install @types/ckeditor
- JSPM : jspm install npm:@types/ckeditor
- NPM : npm install --save @types/ckeditor
- YARN : yarn add @types/ckeditor
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)

<a name="sample"></a>Sample

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>';
}

<a name="config"></a>Configuration

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

<a name="toolbar"></a>Toolbar Directives

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

<ckbutton> : Note that the name and command 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>

<a name="issues"></a>Issues

<a name="licence"></a>Licence

See LICENSE file