From cf2bfe807a3bbdbe13122efa3e210f26168be403 Mon Sep 17 00:00:00 2001 From: Timebutt Date: Thu, 4 Feb 2021 11:02:04 +0100 Subject: [PATCH 1/3] Improve typing and export CKEditorComponent --- src/ckeditor.component.ts | 15 +++++++-------- src/index.ts | 1 + tsconfig.json | 3 ++- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/ckeditor.component.ts b/src/ckeditor.component.ts index 8a7e748..79e8a04 100644 --- a/src/ckeditor.component.ts +++ b/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,7 +36,7 @@ declare var CKEDITOR: any; template: ``, }) export class CKEditorComponent implements OnChanges, AfterViewInit, OnDestroy { - @Input() config: any; + @Input() config: CKEDITOR.config; @Input() readonly: boolean; @Input() debounce: string; @@ -52,14 +51,14 @@ export class CKEditorComponent implements OnChanges, AfterViewInit, OnDestroy { @Output() paste = new EventEmitter(); @Output() drop = new EventEmitter(); - @ViewChild('host', { static: false }) host: any; + @ViewChild('host', { static: false }) host: ElementRef; @ContentChildren(CKButtonDirective) toolbarButtons: QueryList; @ContentChildren(CKGroupDirective) toolbarGroups: QueryList; _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 { diff --git a/src/index.ts b/src/index.ts index 5711740..075886b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1 +1,2 @@ +export { CKEditorComponent } from './ckeditor.component'; export { CKEditorModule } from './ckeditor.module'; diff --git a/tsconfig.json b/tsconfig.json index a0f23b8..0a79182 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,8 @@ "noImplicitAny": false, "outDir": "lib", "declaration": true, - "rootDir": "." + "rootDir": ".", + "types": ["ckeditor"] }, "include": ["ng2-ckeditor.ts", "src/**/*"], "exclude": ["node_modules"] From 11659933ca74ac5e896d18e05c08775f666675a4 Mon Sep 17 00:00:00 2001 From: Timebutt Date: Thu, 4 Feb 2021 11:13:34 +0100 Subject: [PATCH 2/3] Fix Typescript issues --- src/ckbutton.directive.ts | 1 + src/ckeditor.component.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ckbutton.directive.ts b/src/ckbutton.directive.ts index bb1e227..08c9537 100644 --- a/src/ckbutton.directive.ts +++ b/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; }, }); diff --git a/src/ckeditor.component.ts b/src/ckeditor.component.ts index 79e8a04..0699bc3 100644 --- a/src/ckeditor.component.ts +++ b/src/ckeditor.component.ts @@ -170,7 +170,7 @@ export class CKEditorComponent implements OnChanges, AfterViewInit, OnDestroy { // 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)); From 90792f8cb5880222d854228c838d0598a33b288a Mon Sep 17 00:00:00 2001 From: Timebutt Date: Thu, 4 Feb 2021 11:16:49 +0100 Subject: [PATCH 3/3] Add event types --- src/ckeditor.component.ts | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/ckeditor.component.ts b/src/ckeditor.component.ts index 0699bc3..eb7ceba 100644 --- a/src/ckeditor.component.ts +++ b/src/ckeditor.component.ts @@ -40,16 +40,16 @@ export class CKEditorComponent implements OnChanges, AfterViewInit, OnDestroy { @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(); + @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(); @ViewChild('host', { static: false }) host: ElementRef; @@ -150,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) { @@ -162,7 +162,7 @@ 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(); @@ -186,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); });