diff --git a/CKEditor.d.ts b/CKEditor.d.ts index 73aee96..569b7ba 100644 --- a/CKEditor.d.ts +++ b/CKEditor.d.ts @@ -16,12 +16,12 @@ export declare class CKEditor implements ControlValueAccessor { constructor(elementRef:ElementRef, ngControl:NgControl); ckeditorInit(config:any):void; - hackUpdate():void; + onValueChange(event:any); // ControlValueAccessor writeValue(value:any):void; onChange(_:any):void; registerOnChange(fn:Function):void; registerOnTouched(fn:Function):void; - + } diff --git a/README.md b/README.md index 2b30615..00f9c41 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,9 @@ export class Sample{ ### Configuration -* config : The configuration object for CKEditor see http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-fileTools_defaultFileName -* configFile : You can use a javacsript file to configure your CKEditor (Only work with SystemJS) +* config : The configuration object for CKEditor see http://docs.ckeditor.com/#!/api/CKEDITOR.config + +* ***[Deprecated : use file loader with your bundler]*** configFile : You can use a javacsript file to configure your CKEditor (Only work with SystemJS) ```javascript export var config = { uiColor: '#990000' diff --git a/gulpfile.js b/gulpfile.js index e6495dc..00461b6 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -5,8 +5,7 @@ var cache = require('gulp-cached'); var paths = { dest: 'lib/', - sources: 'src/**/*.es6', - assets: 'src/**/!(*.es6)', + sources: 'src/**/*.es6' }; /** @@ -17,7 +16,7 @@ gulp.task('default', ['watch']); /** * Build all */ -gulp.task('build', ['babel', 'uglify']); +gulp.task('build', ['babel']); /** * Babel transpile all sources @@ -39,5 +38,5 @@ gulp.task('babel', function(){ * Babel watch */ gulp.task('watch', function(){ - return gulp.watch([paths.sources, paths.assets], ['babel']); + return gulp.watch([paths.sources], ['babel']); }); diff --git a/lib/CKEditor.js b/lib/CKEditor.js index f3aed5b..f499ba9 100644 --- a/lib/CKEditor.js +++ b/lib/CKEditor.js @@ -235,5 +235,61 @@ var CKEditor = exports.CKEditor = (_dec = (0, _core.Component)({ return this.host; } })), _class2)) || _class) || _class); + +/** + * CKEditor inline Directive + * @WIP + */ +// @Directive({ +// selector: '[ckeditorInline]', +// }) +// export class CKEditorInline{ +// +// @Input('ckeditorInline') config; +// +// instance; +// el; +// +// /** +// * Constructor +// */ +// constructor(el: ElementRef) { +// this.el = el; +// } +// +// /** +// * On component view init +// */ +// ngAfterViewInit(){ +// var config = this.config || {}; +// //this.ckeditorInit( config ); +// } +// +// /** +// * On component destroy +// */ +// ngOnDestroy(){ +// if( this.instance ) { +// this.instance.removeAllListeners(); +// this.instance.destroy(); +// this.instance = null; +// } +// } +// +// /** +// * CKEditor init +// */ +// ckeditorInit( config ){ +// if(!CKEDITOR){ +// console.error('Please include CKEditor in your page'); +// return; +// } +// +// CKEDITOR.disableAutoInline = true; +// this.instance = CKEDITOR.inline(this.el); +// } +// +// } + Reflect.defineMetadata('design:paramtypes', [_core.ElementRef, _common.NgControl, _core.Renderer], CKEditor); //# sourceMappingURL=CKEditor.js.map diff --git a/lib/CKEditor.js.map b/lib/CKEditor.js.map index 28b3665..fbb964e 100644 --- a/lib/CKEditor.js.map +++ b/lib/CKEditor.js.map @@ -1 +1 @@ -{"version":3,"sources":["CKEditor.es6"],"names":[],"mappings":";;;;;;;;;;;;AACA;;AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAYa,sCALZ,qBAAU;AACP,cAAU,UAAV;AACA,4EAFO;CAAV,WAIA,QAAQ,QAAR,CAAiB,YAAjB,EAA+B,CAAC,IAAD,EAAO,CAAC,4BAAD,CAAP,CAA/B,WAGI,4BACA,4BACA,4BAEA,6BACA,qBAAU,MAAV;;;;;;AAUD,aAjBS,QAiBT,CAAY,UAAZ,EAAmC,SAAnC,EAAwD,QAAxD,EAA0E;8BAjBjE,UAiBiE;;;;;;;;;;;;aAR1E,QAAQ,GAQkE;aAP1E,yBAO0E;aAN1E,2BAM0E;aAL1E,yBAK0E;;AACtE,YAAI,SAAJ,EAAe;AACX,sBAAU,aAAV,GAA0B,IAA1B,CADW;AAEX,iBAAK,SAAL,GAAiB,SAAjB,CAFW;SAAf;AAIA,aAAK,QAAL,GAAgB,QAAhB,CALsE;KAA1E;;;;;;;iBAjBS;;sCA4BI;AACT,gBAAI,KAAK,QAAL,EAAgB;AAChB,qBAAK,QAAL,CAAc,kBAAd,GADgB;AAEhB,qBAAK,QAAL,CAAc,OAAd,GAFgB;AAGhB,qBAAK,QAAL,GAAgB,IAAhB,CAHgB;aAApB;;;;;;;;;0CAUa;;;;AAEb,gBAAI,SAAS,EAAT;;;AAFS,gBAKT,KAAK,UAAL,EAAiB;;AAEjB,oBAAI,UAAU,OAAO,MAAP,EAAe;AACzB,2BAAO,MAAP,CAAc,KAAK,UAAL,CAAd,CACK,IADL,CACU,UAAC,GAAD,EAAS;AACX,8BAAK,YAAL,CAAmB,IAAI,MAAJ,CAAnB,CADW;qBAAT,CADV,CADyB;iBAA7B;;;AAFiB,aAArB,MAUK;AACD,6BAAS,KAAK,MAAL,IAAe,EAAf,CADR;AAED,yBAAK,YAAL,CAAmB,MAAnB,EAFC;iBAVL;;;;;;;;;sCAmBU,OAAM;AAChB,gBAAI,QAAQ,KAAK,IAAL,CAAU,aAAV,CAAwB,KAAxB,CADI;AAEhB,iBAAK,MAAL,CAAY,IAAZ,CAAkB,KAAlB,EAFgB;AAGhB,iBAAK,SAAL,CAAe,iBAAf,CAAkC,KAAlC,EAHgB;;;;;;;;;qCASN,QAAQ;;;AAElB,gBAAG,CAAC,QAAD,EAAU;AACT,wBAAQ,KAAR,CAAc,sCAAd,EADS;AAET,uBAFS;aAAb;;;AAFkB,gBAQlB,CAAK,QAAL,GAAgB,SAAS,OAAT,CAAkB,KAAK,IAAL,CAAU,aAAV,EAAyB,MAA3C,CAAhB;;;AARkB,gBAWlB,CAAK,QAAL,CAAc,OAAd,CAAsB,KAAK,KAAL,CAAtB;;;AAXkB,gBAclB,CAAK,QAAL,CAAc,EAAd,CAAiB,QAAjB,EAA2B,YAAM;AAC7B,uBAAK,QAAL,CAAc,kBAAd,CAAiC,OAAK,IAAL,CAAU,aAAV,EAAyB,OAA1D,EAAmE,OAAK,QAAL,CAAc,OAAd,EAAnE,EAD6B;AAE7B,uBAAK,QAAL,CAAc,mBAAd,CAAkC,OAAK,IAAL,CAAU,aAAV,EAAyB,eAA3D,EAA4E,CAAC,IAAI,KAAJ,CAAU,QAAV,CAAD,CAA5E,EAF6B;aAAN,CAA3B,CAdkB;;;;;;;;;mCAuBX,OAAM;AACb,iBAAK,KAAL,GAAa,KAAb,CADa;AAEb,gBAAI,KAAK,QAAL,EACA,KAAK,QAAL,CAAc,OAAd,CAAsB,KAAtB,EADJ;;;;iCAGK,GAAE;;;oCACA;;;yCACM,IAAG;AAAC,iBAAK,QAAL,GAAgB,EAAhB,CAAD;;;;0CACF,IAAG;AAAC,iBAAK,SAAL,GAAiB,EAAjB,CAAD;;;;WAvGZ;;;;oBAEA;;;;;oBACA;;;;;oBACA;;;;;eAEU;;;;;oBACA;;;mGAPV","file":"CKEditor.js","sourcesContent":["// Imports\nimport {\n Component,\n Directive,\n Input,\n Output,\n ElementRef,\n ViewChild,\n Optional,\n OptionalMetadata,\n EventEmitter,\n Renderer\n} from 'angular2/core';\nimport {NgControl, ControlValueAccessor} from 'angular2/common';\n\n/**\n * CKEditor component\n * Usage :\n * \n */\n@Component({\n selector: 'ckeditor',\n template: ``,\n})\n@Reflect.metadata('parameters', [null, [new OptionalMetadata()]])\nexport class CKEditor {\n\n @Input() config;\n @Input() configFile;\n @Input() ngModel;\n\n @Output() change = new EventEmitter();\n @ViewChild('host') host;\n\n value = '';\n instance;\n ngControl;\n renderer;\n\n /**\n * Constructor\n */\n constructor(elementRef:ElementRef, ngControl:NgControl, renderer:Renderer){\n if( ngControl ){\n ngControl.valueAccessor = this;\n this.ngControl = ngControl;\n }\n this.renderer = renderer;\n }\n\n /**\n * On component destroy\n */\n ngOnDestroy(){\n if( this.instance ) {\n this.instance.removeAllListeners();\n this.instance.destroy();\n this.instance = null;\n }\n }\n\n /**\n * On component view init\n */\n ngAfterViewInit(){\n // Configuration\n var config = {};\n\n // Fetch file\n if( this.configFile ){\n\n if( System && System.import ){\n System.import(this.configFile)\n .then((res) => {\n this.ckeditorInit( res.config );\n })\n }\n\n // Config object\n }else{\n config = this.config || {};\n this.ckeditorInit( config );\n }\n }\n\n /**\n * Detect textarea value change\n */\n onValueChange(event){\n var value = this.host.nativeElement.value;\n this.change.emit( value );\n this.ngControl.viewToModelUpdate( value );\n }\n\n /**\n * CKEditor init\n */\n ckeditorInit( config ){\n\n if(!CKEDITOR){\n console.error('Please include CKEditor in your page');\n return;\n }\n\n // CKEditor replace textarea\n this.instance = CKEDITOR.replace( this.host.nativeElement, config );\n\n // Set initial value\n this.instance.setData(this.value);\n\n // CKEditor change event\n this.instance.on('change', () => {\n this.renderer.setElementProperty(this.host.nativeElement, 'value', this.instance.getData());\n this.renderer.invokeElementMethod(this.host.nativeElement, 'dispatchEvent', [new Event('change')]);\n });\n }\n\n /**\n * Implements ControlValueAccessor\n */\n writeValue(value){\n this.value = value;\n if( this.instance )\n this.instance.setData(value);\n }\n onChange(_){}\n onTouched(){}\n registerOnChange(fn){this.onChange = fn;}\n registerOnTouched(fn){this.onTouched = fn;}\n}\n"],"sourceRoot":"/source/"} \ No newline at end of file +{"version":3,"sources":["CKEditor.es6"],"names":[],"mappings":"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","file":"CKEditor.js","sourcesContent":["// Imports\nimport {\n Component,\n Directive,\n Input,\n Output,\n ElementRef,\n ViewChild,\n Optional,\n OptionalMetadata,\n EventEmitter,\n Renderer\n} from '@angular/core';\nimport {NgControl, ControlValueAccessor} from '@angular/common';\n\n/**\n * CKEditor component\n * Usage :\n * \n */\n@Component({\n selector: 'ckeditor',\n template: ``,\n})\n@Reflect.metadata('parameters', [null, [new OptionalMetadata()]])\nexport class CKEditor {\n\n @Input() config;\n @Input() configFile;\n @Input() ngModel;\n\n @Output() change = new EventEmitter();\n @ViewChild('host') host;\n\n value = '';\n instance;\n ngControl;\n renderer;\n\n /**\n * Constructor\n */\n constructor(elementRef:ElementRef, ngControl:NgControl, renderer:Renderer){\n if( ngControl ){\n ngControl.valueAccessor = this;\n this.ngControl = ngControl;\n }\n this.renderer = renderer;\n }\n\n /**\n * On component destroy\n */\n ngOnDestroy(){\n if( this.instance ) {\n this.instance.removeAllListeners();\n this.instance.destroy();\n this.instance = null;\n }\n }\n\n /**\n * On component view init\n */\n ngAfterViewInit(){\n // Configuration\n var config = {};\n\n // Fetch file\n if( this.configFile ){\n\n if( System && System.import ){\n System.import(this.configFile)\n .then((res) => {\n this.ckeditorInit( res.config );\n })\n }\n\n // Config object\n }else{\n config = this.config || {};\n this.ckeditorInit( config );\n }\n }\n\n /**\n * Detect textarea value change\n */\n onValueChange(event){\n var value = this.host.nativeElement.value;\n this.change.emit( value );\n this.ngControl.viewToModelUpdate( value );\n }\n\n /**\n * CKEditor init\n */\n ckeditorInit( config ){\n\n if(!CKEDITOR){\n console.error('Please include CKEditor in your page');\n return;\n }\n\n // CKEditor replace textarea\n this.instance = CKEDITOR.replace( this.host.nativeElement, config );\n\n // Set initial value\n this.instance.setData(this.value);\n\n // CKEditor change event\n this.instance.on('change', () => {\n this.renderer.setElementProperty(this.host.nativeElement, 'value', this.instance.getData());\n this.renderer.invokeElementMethod(this.host.nativeElement, 'dispatchEvent', [new Event('change')]);\n });\n }\n\n /**\n * Implements ControlValueAccessor\n */\n writeValue(value){\n this.value = value;\n if( this.instance )\n this.instance.setData(value);\n }\n onChange(_){}\n onTouched(){}\n registerOnChange(fn){this.onChange = fn;}\n registerOnTouched(fn){this.onTouched = fn;}\n}\n\n/**\n * CKEditor inline Directive\n * @WIP\n */\n// @Directive({\n// selector: '[ckeditorInline]',\n// })\n// export class CKEditorInline{\n//\n// @Input('ckeditorInline') config;\n//\n// instance;\n// el;\n//\n// /**\n// * Constructor\n// */\n// constructor(el: ElementRef) {\n// this.el = el;\n// }\n//\n// /**\n// * On component view init\n// */\n// ngAfterViewInit(){\n// var config = this.config || {};\n// //this.ckeditorInit( config );\n// }\n//\n// /**\n// * On component destroy\n// */\n// ngOnDestroy(){\n// if( this.instance ) {\n// this.instance.removeAllListeners();\n// this.instance.destroy();\n// this.instance = null;\n// }\n// }\n//\n// /**\n// * CKEditor init\n// */\n// ckeditorInit( config ){\n// if(!CKEDITOR){\n// console.error('Please include CKEditor in your page');\n// return;\n// }\n//\n// CKEDITOR.disableAutoInline = true;\n// this.instance = CKEDITOR.inline(this.el);\n// }\n//\n// }\n"]} \ No newline at end of file diff --git a/package.json b/package.json index 90aa87b..5738376 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-ckeditor", - "version": "1.0.2", + "version": "1.0.3", "description": "Angular2 CKEditor component", "main": "lib/CKEditor.js", "typings": "./CKEditor.d.ts", diff --git a/src/CKEditor.es6 b/src/CKEditor.es6 index 50a999c..48f965c 100644 --- a/src/CKEditor.es6 +++ b/src/CKEditor.es6 @@ -128,3 +128,58 @@ export class CKEditor { registerOnChange(fn){this.onChange = fn;} registerOnTouched(fn){this.onTouched = fn;} } + +/** + * CKEditor inline Directive + * @WIP + */ +// @Directive({ +// selector: '[ckeditorInline]', +// }) +// export class CKEditorInline{ +// +// @Input('ckeditorInline') config; +// +// instance; +// el; +// +// /** +// * Constructor +// */ +// constructor(el: ElementRef) { +// this.el = el; +// } +// +// /** +// * On component view init +// */ +// ngAfterViewInit(){ +// var config = this.config || {}; +// //this.ckeditorInit( config ); +// } +// +// /** +// * On component destroy +// */ +// ngOnDestroy(){ +// if( this.instance ) { +// this.instance.removeAllListeners(); +// this.instance.destroy(); +// this.instance = null; +// } +// } +// +// /** +// * CKEditor init +// */ +// ckeditorInit( config ){ +// if(!CKEDITOR){ +// console.error('Please include CKEditor in your page'); +// return; +// } +// +// CKEDITOR.disableAutoInline = true; +// this.instance = CKEDITOR.inline(this.el); +// } +// +// }