kiruthiga 55473b7e7c initial push		vor 5 Tagen
..
bundles	55473b7e7c initial push	vor 5 Tagen
esm2015	55473b7e7c initial push	vor 5 Tagen
esm5	55473b7e7c initial push	vor 5 Tagen
fesm2015	55473b7e7c initial push	vor 5 Tagen
fesm5	55473b7e7c initial push	vor 5 Tagen
LICENSE	55473b7e7c initial push	vor 5 Tagen
README.md	55473b7e7c initial push	vor 5 Tagen
ckbutton.directive.d.ts	55473b7e7c initial push	vor 5 Tagen
ckeditor.component.d.ts	55473b7e7c initial push	vor 5 Tagen
ckeditor.module.d.ts	55473b7e7c initial push	vor 5 Tagen
ckgroup.directive.d.ts	55473b7e7c initial push	vor 5 Tagen
index.d.ts	55473b7e7c initial push	vor 5 Tagen
ng2-ckeditor.d.ts	55473b7e7c initial push	vor 5 Tagen
ng2-ckeditor.metadata.json	55473b7e7c initial push	vor 5 Tagen
package.json	55473b7e7c initial push	vor 5 Tagen

Angular - CKEditor component

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

Demo

Installation

Include CKEditor javascript files in your application :

<script src="https://cdn.ckeditor.com/4.10.1/full/ckeditor.js"></script>

Install ng2-ckeditor
- JSPM : jspm install npm:ng2-ckeditor
- NPM : npm install ng2-ckeditor
- YARN: yarn add ng2-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)

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

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

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>

Issues

Licence

See LICENSE file

README.md