raonkeditor-angular
Version:
Angular component for RAON K Editor.
421 lines (414 loc) • 19.3 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('raonwiz-integrations-common')) :
typeof define === 'function' && define.amd ? define('raonkeditor-angular', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'raonwiz-integrations-common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["raonkeditor-angular"] = {}, global.ng.core, global.ng.common, global.ng.forms, global.raonwizIntegrationsCommon));
})(this, (function (exports, core, common, forms, raonwizIntegrationsCommon) { 'use strict';
/**
* @license Copyright (c) 2003-2022, RAONWIZ DevTeam. All rights reserved.
*/
var RaonkEditorComponent = /** @class */ (function () {
function RaonkEditorComponent(elementRef, ngZone) {
this.elementRef = elementRef;
this.ngZone = ngZone;
/**
* The id of the component
*/
this.id = "";
/**
* The component type
*/
this.componentType = 'RAONKEDITOR';
/**
* RAON K Editor script url address. Script will be loaded only if RAONKEDITOR namespace is missing.
*/
this.componentUrl = '/raonkeditor/js/raonkeditor.js';
/**
* Tag name of the component.
*
* The default tag is `div`.
*/
this.tagName = 'div';
/**
* The runtimes of the component interface.
*/
this.runtimes = "html5" /* HTML5 */;
/**
* Fired when the component namespace
* is loaded. It only triggers once, no matter how many components are initialised.
*/
this.namespaceLoaded = new core.EventEmitter();
this.change = new core.EventEmitter();
/**
* event.
*/
this.creationComplete = new core.EventEmitter();
this.afterChangeMode = new core.EventEmitter();
this.onError = new core.EventEmitter();
this.onLanguageDefinition = new core.EventEmitter();
this.afterPopupShow = new core.EventEmitter();
this.agentInstall = new core.EventEmitter();
this.beforeInsertUrl = new core.EventEmitter();
this.mouse = new core.EventEmitter();
this.command = new core.EventEmitter();
this.key = new core.EventEmitter();
this.resized = new core.EventEmitter();
this.documentEditComplete = new core.EventEmitter();
this.pasteImage = new core.EventEmitter();
this.wordCount = new core.EventEmitter();
this.beforePaste = new core.EventEmitter();
this.customAction = new core.EventEmitter();
this.fullScreen = new core.EventEmitter();
this.setComplete = new core.EventEmitter();
this.setInsertComplete = new core.EventEmitter();
this.closeInstallPopup = new core.EventEmitter();
this.setForbiddenWordComplete = new core.EventEmitter();
this.drag = new core.EventEmitter();
this.focus = new core.EventEmitter();
this.dialogLoaded = new core.EventEmitter();
this.beforeInsertHyperlink = new core.EventEmitter();
/**
* If the component is view-mode before the component instance is created, it remembers that state,
* so the component can become view-mode once it is ready.
*/
this._readOnly = null;
this._viewMode = null;
this._data = null;
this._destroyed = false;
}
Object.defineProperty(RaonkEditorComponent.prototype, "data", {
get: function () {
return this._data;
},
/**
* Keeps track of the component's data.
*
* It's also decorated as an input which is useful when not using the ngModel.
*
* See https://angular.io/api/forms/NgModel to learn more.
*/
set: function (data) {
console.log("this.id: " + this.id + ", data : " + data);
if (data === this._data) {
return;
}
if (this.instance) {
RAONKEDITOR.SetHtmlContents(data, this.id);
return;
}
this._data = data;
},
enumerable: false,
configurable: true
});
Object.defineProperty(RaonkEditorComponent.prototype, "readOnly", {
get: function () {
if (this.instance) {
return RAONKEDITOR.GetEditorByName(this.id)._BODY.contentEditable;
}
return this._readOnly;
},
/**
* When set to `true`, the editor becomes readonly mode.
*/
set: function (isReadOnly) {
if (this.instance) {
RAONKEDITOR.SetReadOnly(isReadOnly, '', this.id);
return;
}
// Delay setting mode
this._readOnly = isReadOnly;
},
enumerable: false,
configurable: true
});
Object.defineProperty(RaonkEditorComponent.prototype, "viewMode", {
get: function () {
if (this.instance) {
var retValue = void 0;
switch (RAONKEDITOR.GetEditorByName(this.id)._config.mode.toLowerCase()) {
case 'edit':
retValue = false;
break;
default:
retValue = true;
break;
}
return retValue;
}
return this._viewMode;
},
/**
* When set to `true`, the editor becomes view mode.
*/
set: function (isViewMode) {
if (this.instance) {
RAONKEDITOR.SetEditorMode(isViewMode ? 'view' : 'edit', this.id);
return;
}
// Delay setting mode
this._viewMode = isViewMode;
},
enumerable: false,
configurable: true
});
RaonkEditorComponent.prototype.ngAfterViewInit = function () {
var _this_1 = this;
raonwizIntegrationsCommon.getRaonwizComponentNamespace(this.componentType, this.componentUrl, function (namespace) {
_this_1.namespaceLoaded.emit(namespace);
}).then(function (namespace) {
// Check if component instance was destroyed before `ngAfterViewInit` call (#110).
// Here, `this.instance` is still not initialized and so additional flag is needed.
if (_this_1._destroyed) {
return;
}
_this_1.ngZone.runOutsideAngular(_this_1.createComponent.bind(_this_1, namespace));
}).catch(window.console.error);
};
RaonkEditorComponent.prototype.ngOnDestroy = function () {
var _this_1 = this;
this._destroyed = true;
this.ngZone.runOutsideAngular(function () {
if (_this_1.instance) {
if (RAONKEDITOR._ExternalComponentMap.has(_this_1.id)) {
RAONKEDITOR._ExternalComponentMap.delete(_this_1.id);
}
if (RAONKEDITOR._ExternalEventRetValueMap.has(_this_1.id)) {
RAONKEDITOR._ExternalEventRetValueMap.delete(_this_1.id);
}
RAONKEDITOR.Destroy(_this_1.id, false);
_this_1.instance = null;
}
});
};
RaonkEditorComponent.prototype.writeValue = function (value) {
this.data = value;
};
RaonkEditorComponent.prototype.registerOnChange = function (callback) {
this.onChange = callback;
};
RaonkEditorComponent.prototype.registerOnTouched = function (callback) {
this.onTouched = callback;
};
RaonkEditorComponent.prototype.getComponentUniqueName = function () {
return "raonkeditor_" + Math.random()
.toString(36)
.replace(/[^a-z]+/g, '')
.substr(0, 5);
};
RaonkEditorComponent.prototype.createComponent = function (namespace) {
var _uniqueName = this.getComponentUniqueName();
(typeof this.id === 'undefined') && (this.id = _uniqueName);
var element = document.createElement(this.tagName);
element.id = "componentHolder_" + _uniqueName;
this.elementRef.nativeElement.appendChild(element);
// view state may change during instance initialization.
(this._viewMode !== null) && (this.viewMode = this._viewMode);
// default config
var _compConfig = {
Id: this.id,
EditorHolder: element.id,
Runtimes: this.runtimes,
Mode: this._viewMode ? 'view' : 'edit',
ReturnEventKeyboard: '1',
ReturnEventFocus: '1',
ReturnEventCommand: '1',
Event: this.subscribe()
};
_compConfig = namespace.util.objectExtend(true, this.config, _compConfig);
// for event callback
(typeof namespace._ExternalComponentMap === 'undefined') && (namespace._ExternalComponentMap = new Map());
namespace._ExternalComponentMap.set(this.id, this);
(typeof namespace._ExternalEventRetValueMap === 'undefined') && (namespace._ExternalEventRetValueMap = new Map());
var _componentObject = new RAONKEditor(_compConfig);
_componentObject.name = element.id;
this.instance = _componentObject;
};
RaonkEditorComponent.prototype.subscribe = function () {
var _configEvent = {};
var ComponentEvents = [
'CreationComplete',
'AfterChangeMode',
'OnError',
'OnLanguageDefinition',
'AfterPopupShow',
'AgentInstall',
'BeforeInsertUrl',
'Mouse',
'Command',
'Key',
'Resized',
'DocumentEditComplete',
'PasteImage',
'WordCount',
'BeforePaste',
'CustomAction',
'FullScreen',
'SetComplete',
'SetInsertComplete',
'CloseInstallPopup',
'SetForbiddenWordComplete',
'Drag',
'Focus',
'DialogLoaded',
'BeforeInsertHyperlink'
];
ComponentEvents.forEach(function (evtName) {
_configEvent[evtName] = function (componentName, paramObj) {
// Set default value
switch (evtName) {
case 'BeforePaste':
RAONKEDITOR._ExternalEventRetValueMap.set(componentName, paramObj.strHtml);
break;
case 'BeforeInsertUrl':
RAONKEDITOR._ExternalEventRetValueMap.set(componentName, paramObj.strUrl);
break;
case 'BeforeInsertHyperlink':
RAONKEDITOR._ExternalEventRetValueMap.set(componentName, paramObj); // url
break;
}
if (RAONKEDITOR._ExternalComponentMap.has(componentName)) {
var _this_2 = RAONKEDITOR._ExternalComponentMap.get(componentName);
_this_2.ngZone.run(function () {
switch (evtName) {
case 'Focus':
if (_this_2.onTouched) {
_this_2.onTouched();
}
break;
case 'Command':
_this_2.propagateChange(evtName, { componentName: componentName, paramObj: paramObj });
break;
case 'Key':
if (paramObj.strEventName === 'keyup') {
_this_2.propagateChange(evtName, { componentName: componentName, paramObj: paramObj });
}
break;
case 'CreationComplete':
if (_this_2.data && typeof _this_2.data !== 'undefined' && _this_2.data !== '') {
RAONKEDITOR.SetHtmlContents(_this_2.data, _this_2.id);
}
// Data may be changed by content filtering.
_this_2._data = RAONKEDITOR.GetEditorByName(_this_2.id)._BODY.innerHTML;
break;
case 'SetComplete':
// Data may be changed by content filtering.
_this_2._data = RAONKEDITOR.GetEditorByName(_this_2.id)._BODY.innerHTML;
break;
}
_this_2[_this_2.capitalize(evtName)].emit({ componentName: componentName, paramObj: paramObj });
});
}
// return event
var _retValue = "";
switch (evtName) {
case 'BeforePaste':
case 'BeforeInsertUrl':
case 'BeforeInsertHyperlink':
if (RAONKEDITOR._ExternalEventRetValueMap.has(componentName)) {
_retValue = RAONKEDITOR._ExternalEventRetValueMap.get(componentName);
RAONKEDITOR._ExternalEventRetValueMap.delete(componentName); // Initialization
return _retValue;
}
break;
}
};
});
return _configEvent;
};
RaonkEditorComponent.prototype.capitalize = function (str) {
return str.charAt(0).toLowerCase() + str.slice(1);
};
RaonkEditorComponent.prototype.propagateChange = function (eventName, eventParams) {
var _this_1 = this;
this.ngZone.run(function () {
var newData = RAONKEDITOR.GetEditorByName(_this_1.id)._BODY.innerHTML;
_this_1.change.emit(eventParams);
if (newData === _this_1.data) {
return;
}
_this_1._data = newData;
if (_this_1.onChange) {
_this_1.onChange(newData);
}
});
};
return RaonkEditorComponent;
}());
RaonkEditorComponent.decorators = [
{ type: core.Component, args: [{
selector: 'RaonkEditor',
template: '<ng-template></ng-template>',
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return RaonkEditorComponent; }),
multi: true,
}
]
},] }
];
RaonkEditorComponent.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.NgZone }
]; };
RaonkEditorComponent.propDecorators = {
id: [{ type: core.Input }],
config: [{ type: core.Input }],
componentType: [{ type: core.Input }],
componentUrl: [{ type: core.Input }],
tagName: [{ type: core.Input }],
runtimes: [{ type: core.Input }],
data: [{ type: core.Input }],
readOnly: [{ type: core.Input }],
viewMode: [{ type: core.Input }],
namespaceLoaded: [{ type: core.Output }],
change: [{ type: core.Output }],
creationComplete: [{ type: core.Output }],
afterChangeMode: [{ type: core.Output }],
onError: [{ type: core.Output }],
onLanguageDefinition: [{ type: core.Output }],
afterPopupShow: [{ type: core.Output }],
agentInstall: [{ type: core.Output }],
beforeInsertUrl: [{ type: core.Output }],
mouse: [{ type: core.Output }],
command: [{ type: core.Output }],
key: [{ type: core.Output }],
resized: [{ type: core.Output }],
documentEditComplete: [{ type: core.Output }],
pasteImage: [{ type: core.Output }],
wordCount: [{ type: core.Output }],
beforePaste: [{ type: core.Output }],
customAction: [{ type: core.Output }],
fullScreen: [{ type: core.Output }],
setComplete: [{ type: core.Output }],
setInsertComplete: [{ type: core.Output }],
closeInstallPopup: [{ type: core.Output }],
setForbiddenWordComplete: [{ type: core.Output }],
drag: [{ type: core.Output }],
focus: [{ type: core.Output }],
dialogLoaded: [{ type: core.Output }],
beforeInsertHyperlink: [{ type: core.Output }]
};
/**
* @license Copyright (c) 2003-2022, RAONWIZ DevTeam. All rights reserved.
*/
var RaonkEditorModule = /** @class */ (function () {
function RaonkEditorModule() {
}
return RaonkEditorModule;
}());
RaonkEditorModule.decorators = [
{ type: core.NgModule, args: [{
imports: [forms.FormsModule, common.CommonModule],
declarations: [RaonkEditorComponent],
exports: [RaonkEditorComponent]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
exports.RaonkEditorComponent = RaonkEditorComponent;
exports.RaonkEditorModule = RaonkEditorModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=raonkeditor-angular.umd.js.map