| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411 |
- import { __decorate, __metadata } from 'tslib';
- import { EventEmitter, Output, Input, Directive, ContentChildren, QueryList, NgZone, ViewChild, Component, forwardRef, NgModule } from '@angular/core';
- import { CommonModule } from '@angular/common';
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
- /**
- * CKGroup component
- * Usage :
- * <ckeditor [(ngModel)]="data" [config]="{...}" debounce="500">
- * <ckbutton [name]="'SaveButton'" [command]="'saveCommand'" (click)="save($event)"
- * [icon]="'/save.png'" [toolbar]="'customGroup,1'" [label]="'Save'">
- * </ckbutton>
- * </ckeditor>
- */
- let CKButtonDirective = class CKButtonDirective {
- /**
- * CKGroup component
- * Usage :
- * <ckeditor [(ngModel)]="data" [config]="{...}" debounce="500">
- * <ckbutton [name]="'SaveButton'" [command]="'saveCommand'" (click)="save($event)"
- * [icon]="'/save.png'" [toolbar]="'customGroup,1'" [label]="'Save'">
- * </ckbutton>
- * </ckeditor>
- */
- constructor() {
- this.click = new EventEmitter();
- }
- initialize(editor) {
- editor.instance.addCommand(this.command, {
- exec: (evt) => {
- this.click.emit(evt);
- },
- });
- editor.instance.ui.addButton(this.name, {
- label: this.label,
- command: this.command,
- toolbar: this.toolbar,
- icon: this.icon,
- });
- }
- ngOnInit() {
- if (!this.name)
- throw new Error('Attribute "name" is required on <ckbutton>');
- if (!this.command)
- throw new Error('Attribute "command" is required on <ckbutton>');
- }
- };
- __decorate([
- Output(),
- __metadata("design:type", Object)
- ], CKButtonDirective.prototype, "click", void 0);
- __decorate([
- Input(),
- __metadata("design:type", String)
- ], CKButtonDirective.prototype, "label", void 0);
- __decorate([
- Input(),
- __metadata("design:type", String)
- ], CKButtonDirective.prototype, "command", void 0);
- __decorate([
- Input(),
- __metadata("design:type", String)
- ], CKButtonDirective.prototype, "toolbar", void 0);
- __decorate([
- Input(),
- __metadata("design:type", String)
- ], CKButtonDirective.prototype, "name", void 0);
- __decorate([
- Input(),
- __metadata("design:type", String)
- ], CKButtonDirective.prototype, "icon", void 0);
- CKButtonDirective = __decorate([
- Directive({
- selector: 'ckbutton',
- })
- ], CKButtonDirective);
- /**
- * CKGroup component
- * Usage :
- * <ckeditor [(ngModel)]="data" [config]="{...}" debounce="500">
- * <ckgroup [name]="'exampleGroup2'" [previous]="'1'" [subgroupOf]="'exampleGroup1'">
- * .
- * .
- * </ckgroup>
- * </ckeditor>
- */
- let CKGroupDirective = class CKGroupDirective {
- ngAfterContentInit() {
- // Reconfigure each button's toolbar property within ckgroup to hold its parent's name
- this.toolbarButtons.forEach(button => (button.toolbar = this.name));
- }
- initialize(editor) {
- editor.instance.ui.addToolbarGroup(this.name, this.previous, this.subgroupOf);
- // Initialize each button within ckgroup
- this.toolbarButtons.forEach(button => {
- button.initialize(editor);
- });
- }
- };
- __decorate([
- Input(),
- __metadata("design:type", String)
- ], CKGroupDirective.prototype, "name", void 0);
- __decorate([
- Input(),
- __metadata("design:type", Object)
- ], CKGroupDirective.prototype, "previous", void 0);
- __decorate([
- Input(),
- __metadata("design:type", String)
- ], CKGroupDirective.prototype, "subgroupOf", void 0);
- __decorate([
- ContentChildren(CKButtonDirective),
- __metadata("design:type", QueryList)
- ], CKGroupDirective.prototype, "toolbarButtons", void 0);
- CKGroupDirective = __decorate([
- Directive({
- selector: 'ckgroup',
- })
- ], CKGroupDirective);
- var CKEditorComponent_1;
- /**
- * CKEditor component
- * Usage :
- * <ckeditor [(ngModel)]="data" [config]="{...}" debounce="500"></ckeditor>
- */
- let CKEditorComponent = CKEditorComponent_1 = class CKEditorComponent {
- /**
- * Constructor
- */
- constructor(zone) {
- this.zone = zone;
- this.change = new EventEmitter();
- this.editorChange = new EventEmitter();
- this.ready = new EventEmitter();
- this.blur = new EventEmitter();
- this.focus = new EventEmitter();
- this.contentDom = new EventEmitter();
- this.fileUploadRequest = new EventEmitter();
- this.fileUploadResponse = new EventEmitter();
- this.paste = new EventEmitter();
- this.drop = new EventEmitter();
- this._value = '';
- }
- get value() {
- return this._value;
- }
- set value(v) {
- if (v !== this._value) {
- this._value = v;
- this.onChange(v);
- }
- }
- ngOnChanges(changes) {
- if (changes.readonly && this.instance) {
- this.instance.setReadOnly(changes.readonly.currentValue);
- }
- }
- /**
- * On component destroy
- */
- ngOnDestroy() {
- if (this.instance) {
- this.instance.removeAllListeners();
- CKEDITOR.instances[this.instance.name].destroy();
- this.instance.destroy();
- this.instance = null;
- }
- }
- /**
- * On component view init
- */
- ngAfterViewInit() {
- this.ckeditorInit(this.config || {});
- }
- /**
- * On component view checked
- */
- ngAfterViewChecked() {
- this.ckeditorInit(this.config || {});
- }
- /**
- * Value update process
- */
- updateValue(value) {
- this.zone.run(() => {
- this.value = value;
- this.onChange(value);
- this.onTouched();
- this.change.emit(value);
- });
- }
- /**
- * CKEditor init
- */
- ckeditorInit(config) {
- if (typeof CKEDITOR === 'undefined') {
- console.warn('CKEditor 4.x is missing (http://ckeditor.com/)');
- }
- else {
- // Check textarea exists
- if (this.instance || !this.documentContains(this.host.nativeElement)) {
- return;
- }
- if (this.readonly) {
- config.readOnly = this.readonly;
- }
- // CKEditor replace textarea
- this.instance = CKEDITOR.replace(this.host.nativeElement, config);
- // Set initial value
- this.instance.setData(this.value);
- // listen for instanceReady event
- this.instance.on('instanceReady', (evt) => {
- // if value has changed while instance loading
- // update instance with current component value
- if (this.instance.getData() !== this.value) {
- this.instance.setData(this.value);
- }
- // send the evt to the EventEmitter
- this.ready.emit(evt);
- });
- // CKEditor change event
- this.instance.on('change', (evt) => {
- 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.updateValue(value);
- this.debounceTimeout = null;
- }, parseInt(this.debounce));
- // Live update
- }
- else {
- this.updateValue(value);
- }
- }
- // Original ckeditor event dispatch
- this.editorChange.emit(evt);
- });
- // CKEditor blur event
- this.instance.on('blur', (evt) => {
- this.blur.emit(evt);
- });
- // CKEditor focus event
- this.instance.on('focus', (evt) => {
- this.focus.emit(evt);
- });
- // CKEditor contentDom event
- this.instance.on('contentDom', (evt) => {
- this.contentDom.emit(evt);
- });
- // CKEditor fileUploadRequest event
- this.instance.on('fileUploadRequest', (evt) => {
- this.fileUploadRequest.emit(evt);
- });
- // CKEditor fileUploadResponse event
- this.instance.on('fileUploadResponse', (evt) => {
- this.fileUploadResponse.emit(evt);
- });
- // CKEditor paste event
- this.instance.on('paste', (evt) => {
- this.paste.emit(evt);
- });
- // CKEditor drop event
- this.instance.on('drop', (evt) => {
- this.drop.emit(evt);
- });
- // Add Toolbar Groups to Editor. This will also add Buttons within groups.
- this.toolbarGroups.forEach(group => {
- group.initialize(this);
- });
- // Add Toolbar Buttons to Editor.
- this.toolbarButtons.forEach(button => {
- button.initialize(this);
- });
- }
- }
- /**
- * Implements ControlValueAccessor
- */
- writeValue(value) {
- this._value = value;
- if (this.instance)
- this.instance.setData(value);
- }
- onChange(_) { }
- onTouched() { }
- registerOnChange(fn) {
- this.onChange = fn;
- }
- registerOnTouched(fn) {
- this.onTouched = fn;
- }
- documentContains(node) {
- return document.contains ? document.contains(node) : document.body.contains(node);
- }
- };
- CKEditorComponent.ctorParameters = () => [
- { type: NgZone }
- ];
- __decorate([
- Input(),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "config", void 0);
- __decorate([
- Input(),
- __metadata("design:type", Boolean)
- ], CKEditorComponent.prototype, "readonly", void 0);
- __decorate([
- Input(),
- __metadata("design:type", String)
- ], CKEditorComponent.prototype, "debounce", void 0);
- __decorate([
- Output(),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "change", void 0);
- __decorate([
- Output(),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "editorChange", void 0);
- __decorate([
- Output(),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "ready", void 0);
- __decorate([
- Output(),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "blur", void 0);
- __decorate([
- Output(),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "focus", void 0);
- __decorate([
- Output(),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "contentDom", void 0);
- __decorate([
- Output(),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "fileUploadRequest", void 0);
- __decorate([
- Output(),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "fileUploadResponse", void 0);
- __decorate([
- Output(),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "paste", void 0);
- __decorate([
- Output(),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "drop", void 0);
- __decorate([
- ViewChild('host', { static: false }),
- __metadata("design:type", Object)
- ], CKEditorComponent.prototype, "host", void 0);
- __decorate([
- ContentChildren(CKButtonDirective),
- __metadata("design:type", QueryList)
- ], CKEditorComponent.prototype, "toolbarButtons", void 0);
- __decorate([
- ContentChildren(CKGroupDirective),
- __metadata("design:type", QueryList)
- ], CKEditorComponent.prototype, "toolbarGroups", void 0);
- __decorate([
- Input(),
- __metadata("design:type", Object),
- __metadata("design:paramtypes", [Object])
- ], CKEditorComponent.prototype, "value", null);
- CKEditorComponent = CKEditorComponent_1 = __decorate([
- Component({
- selector: 'ckeditor',
- providers: [
- {
- provide: NG_VALUE_ACCESSOR,
- useExisting: forwardRef(() => CKEditorComponent_1),
- multi: true,
- },
- ],
- template: `
- <textarea #host></textarea>
- `
- }),
- __metadata("design:paramtypes", [NgZone])
- ], CKEditorComponent);
- /**
- * CKEditorModule
- */
- let CKEditorModule = class CKEditorModule {
- };
- CKEditorModule = __decorate([
- NgModule({
- imports: [CommonModule],
- declarations: [CKEditorComponent, CKButtonDirective, CKGroupDirective],
- exports: [CKEditorComponent, CKButtonDirective, CKGroupDirective],
- })
- ], CKEditorModule);
- /**
- * Generated bundle index. Do not edit.
- */
- export { CKEditorModule, CKEditorComponent as ɵa, CKButtonDirective as ɵb, CKGroupDirective as ɵc };
- //# sourceMappingURL=ng2-ckeditor.js.map
|