Merge pull request #310 from Timebutt/improve-typings-and-export-cked…

…itorcomponent

Improve typing and export CKEditorComponent

src/ckbutton.directive.ts

@@ -25,6 +25,7 @@ export class CKButtonDirective implements OnInit {
     editor.instance.addCommand(this.command, {
       exec: (evt: any) => {
         this.click.emit(evt);
+        return true;
       },
     });
 

src/ckeditor.component.ts

@@ -12,14 +12,13 @@ import {
   ContentChildren,
   SimpleChanges,
   OnChanges,
-  OnDestroy
+  OnDestroy,
+  ElementRef
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CKButtonDirective } from './ckbutton.directive';
 import { CKGroupDirective } from './ckgroup.directive';
 
-declare var CKEDITOR: any;
-
 /**
  * CKEditor component
  * Usage :
@@ -37,29 +36,29 @@ declare var CKEDITOR: any;
   template: `<textarea #host></textarea>`,
 })
 export class CKEditorComponent implements OnChanges, AfterViewInit, OnDestroy {
-  @Input() config: any;
+  @Input() config: CKEDITOR.config;
   @Input() readonly: boolean;
   @Input() debounce: string;
 
-  @Output() change = new EventEmitter();
-  @Output() editorChange = new EventEmitter();
-  @Output() ready = new EventEmitter();
-  @Output() blur = new EventEmitter();
-  @Output() focus = new EventEmitter();
-  @Output() contentDom = new EventEmitter();
-  @Output() fileUploadRequest = new EventEmitter();
-  @Output() fileUploadResponse = new EventEmitter();
-  @Output() paste = new EventEmitter();
-  @Output() drop = new EventEmitter();
+  @Output() change = new EventEmitter<CKEDITOR.eventInfo>();
+  @Output() editorChange = new EventEmitter<CKEDITOR.eventInfo>();
+  @Output() ready = new EventEmitter<CKEDITOR.eventInfo>();
+  @Output() blur = new EventEmitter<CKEDITOR.eventInfo>();
+  @Output() focus = new EventEmitter<CKEDITOR.eventInfo>();
+  @Output() contentDom = new EventEmitter<CKEDITOR.eventInfo>();
+  @Output() fileUploadRequest = new EventEmitter<CKEDITOR.eventInfo>();
+  @Output() fileUploadResponse = new EventEmitter<CKEDITOR.eventInfo>();
+  @Output() paste = new EventEmitter<CKEDITOR.eventInfo>();
+  @Output() drop = new EventEmitter<CKEDITOR.eventInfo>();
 
-  @ViewChild('host', { static: false }) host: any;
+  @ViewChild('host', { static: false }) host: ElementRef<HTMLTextAreaElement>;
 
   @ContentChildren(CKButtonDirective) toolbarButtons: QueryList<CKButtonDirective>;
   @ContentChildren(CKGroupDirective) toolbarGroups: QueryList<CKGroupDirective>;
 
   _value = '';
-  instance: any;
-  debounceTimeout: any;
+  instance: CKEDITOR.editor;
+  debounceTimeout: number;
   private destroyed = false;
 
   /**
@@ -132,7 +131,7 @@ export class CKEditorComponent implements OnChanges, AfterViewInit, OnDestroy {
   /**
    * CKEditor init
    */
-  ckeditorInit(config: any) {
+  ckeditorInit(config: CKEDITOR.config) {
     if (typeof CKEDITOR === 'undefined') {
       console.warn('CKEditor 4.x is missing (http://ckeditor.com/)');
     } else {
@@ -151,7 +150,7 @@ export class CKEditorComponent implements OnChanges, AfterViewInit, OnDestroy {
       this.instance.setData(this.value);
 
       // listen for instanceReady event
-      this.instance.on('instanceReady', (evt: any) => {
+      this.instance.on('instanceReady', (evt: CKEDITOR.eventInfo) => {
         // if value has changed while instance loading
         // update instance with current component value
         if (this.instance.getData() !== this.value) {
@@ -163,15 +162,15 @@ export class CKEditorComponent implements OnChanges, AfterViewInit, OnDestroy {
       });
 
       // CKEditor change event
-      this.instance.on('change', (evt: any) => {
+      this.instance.on('change', (evt: CKEDITOR.eventInfo) => {
         this.onTouched();
         let value = this.instance.getData();
 
         if (this.value !== value) {
           // Debounce update
           if (this.debounce) {
             if (this.debounceTimeout) clearTimeout(this.debounceTimeout);
-            this.debounceTimeout = setTimeout(() => {
+            this.debounceTimeout = window.setTimeout(() => {
               this.updateValue(value);
               this.debounceTimeout = null;
             }, parseInt(this.debounce));
@@ -187,37 +186,37 @@ export class CKEditorComponent implements OnChanges, AfterViewInit, OnDestroy {
       });
 
       // CKEditor blur event
-      this.instance.on('blur', (evt: any) => {
+      this.instance.on('blur', (evt: CKEDITOR.eventInfo) => {
         this.blur.emit(evt);
       });
 
       // CKEditor focus event
-      this.instance.on('focus', (evt: any) => {
+      this.instance.on('focus', (evt: CKEDITOR.eventInfo) => {
         this.focus.emit(evt);
       });
 
       // CKEditor contentDom event
-      this.instance.on('contentDom', (evt: any) => {
+      this.instance.on('contentDom', (evt: CKEDITOR.eventInfo) => {
         this.contentDom.emit(evt);
       });
 
       // CKEditor fileUploadRequest event
-      this.instance.on('fileUploadRequest', (evt: any) => {
+      this.instance.on('fileUploadRequest', (evt: CKEDITOR.eventInfo) => {
         this.fileUploadRequest.emit(evt);
       });
 
       // CKEditor fileUploadResponse event
-      this.instance.on('fileUploadResponse', (evt: any) => {
+      this.instance.on('fileUploadResponse', (evt: CKEDITOR.eventInfo) => {
         this.fileUploadResponse.emit(evt);
       });
 
       // CKEditor paste event
-      this.instance.on('paste', (evt: any) => {
+      this.instance.on('paste', (evt: CKEDITOR.eventInfo) => {
         this.paste.emit(evt);
       });
 
       // CKEditor drop event
-      this.instance.on('drop', (evt: any) => {
+      this.instance.on('drop', (evt: CKEDITOR.eventInfo) => {
         this.drop.emit(evt);
       });
 

src/index.ts

@@ -1 +1,2 @@
+export { CKEditorComponent } from './ckeditor.component';
 export { CKEditorModule } from './ckeditor.module';

tsconfig.json

@@ -12,7 +12,8 @@
     "noImplicitAny": false,
     "outDir": "lib",
     "declaration": true,
-    "rootDir": "."
+    "rootDir": ".",
+    "types": ["ckeditor"]
   },
   "include": ["ng2-ckeditor.ts", "src/**/*"],
   "exclude": ["node_modules"]