ngx-tinymce
Version:
Angular for tinymce
312 lines (305 loc) • 11.2 kB
JavaScript
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
import { Injectable, Inject, Component, forwardRef, Input, ChangeDetectionStrategy, ChangeDetectorRef, TemplateRef, ViewEncapsulation, Output, EventEmitter, NgModule } from '@angular/core';
import { DOCUMENT, CommonModule } from '@angular/common';
var TinymceOptions = /** @class */ (function () {
function TinymceOptions() {
/** 指定tinymce目录路径，默认：`./assets/tinymce/` */
this.baseURL = './assets/tinymce/';
/** 指定tinymce文件名，默认：`tinymce.min.js` */
this.fileName = 'tinymce.min.js';
}
return TinymceOptions;
}());
var ScriptService = /** @class */ (function () {
function ScriptService(doc) {
this.doc = doc;
this.loaded = false;
this.list = {};
this.emitter = new Subject();
}
ScriptService.prototype.getChangeEmitter = function () {
return this.emitter;
};
ScriptService.prototype.load = function (path) {
var _this = this;
if (this.loaded) {
return this;
}
this.loaded = true;
var promises = [];
[path].forEach(function (script) { return promises.push(_this.loadScript(script)); });
Promise.all(promises).then(function (res) {
_this.emitter.next(true);
});
return this;
};
ScriptService.prototype.loadScript = function (path) {
var _this = this;
return new Promise(function (resolve, reject) {
if (_this.list[path] === true) {
resolve({
path: path,
loaded: true,
status: 'Loaded',
});
return;
}
_this.list[path] = true;
var node = _this.doc.createElement('script');
node.type = 'text/javascript';
node.src = path;
node.charset = 'utf-8';
if (node.readyState) {
// IE
node.onreadystatechange = function () {
if (node.readyState === 'loaded' ||
node.readyState === 'complete') {
node.onreadystatechange = null;
resolve({
path: path,
loaded: true,
status: 'Loaded',
});
}
};
}
else {
node.onload = function () {
resolve({
path: path,
loaded: true,
status: 'Loaded',
});
};
}
node.onerror = function (error) {
return resolve({
path: path,
loaded: false,
status: 'Loaded',
});
};
_this.doc.getElementsByTagName('head')[0].appendChild(node);
});
};
ScriptService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
ScriptService.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
]; };
return ScriptService;
}());
var TinymceComponent = /** @class */ (function () {
function TinymceComponent(defConfig, ss, cd) {
this.defConfig = defConfig;
this.ss = ss;
this.cd = cd;
this.load = true;
this.id = "_tinymce-" + Math.random().toString(36).substring(2);
this._disabled = false;
/** 延迟初始化 */
this.delay = 0;
this.ready = new EventEmitter();
}
Object.defineProperty(TinymceComponent.prototype, "disabled", {
set: function (value) {
this._disabled = value;
this.setDisabled();
},
enumerable: true,
configurable: true
});
Object.defineProperty(TinymceComponent.prototype, "loading", {
set: function (value) {
if (value instanceof TemplateRef) {
this._loading = null;
this._loadingTpl = value;
}
else {
this._loading = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TinymceComponent.prototype, "instance", {
get: function () {
return this._instance;
},
enumerable: true,
configurable: true
});
TinymceComponent.prototype.initDelay = function () {
var _this = this;
if (this.delay > 0) {
setTimeout(function () { return _this.init(); }, this.delay);
}
else {
this.init();
}
};
TinymceComponent.prototype.init = function () {
var _this = this;
if (!window.tinymce)
throw new Error('tinymce js文件加载失败');
var _a = this, defConfig = _a.defConfig, config = _a.config, id = _a.id;
if (this._instance)
return;
if (defConfig.baseURL) {
var url = '' + defConfig.baseURL;
if (url.endsWith('/'))
url = url.substr(0, url.length - 1);
tinymce.baseURL = url;
}
var userOptions = Object.assign({}, defConfig.config, config);
var options = Object.assign({
selector: "#" + id,
}, defConfig.config, config, {
setup: function (editor) {
_this._instance = editor;
editor.on('change keyup', function () {
_this.value = editor.getContent();
_this.onChange(_this.value);
_this.cd.detectChanges();
});
if (typeof userOptions.setup === 'function') {
userOptions.setup(editor);
}
},
init_instance_callback: function (editor) {
if (editor && _this.value)
editor.setContent(_this.value);
_this.setDisabled();
if (typeof userOptions.init_instance_callback === 'function') {
userOptions.init_instance_callback(editor);
}
_this.ready.emit(_this._instance);
},
});
if (userOptions.auto_focus) {
options.auto_focus = id;
}
tinymce.init(options);
this.load = false;
this.cd.detectChanges();
};
TinymceComponent.prototype.destroy = function () {
if (!this._instance) {
return;
}
this._instance.off();
this._instance.remove('#' + this.id);
this._instance = null;
};
TinymceComponent.prototype.setDisabled = function () {
if (!this._instance)
return;
this._instance.setMode(this._disabled ? 'readonly' : 'design');
};
TinymceComponent.prototype.ngAfterViewInit = function () {
var _this = this;
// 已经存在对象无须进入懒加载模式
if (window.tinymce) {
this.initDelay();
return;
}
var defConfig = this.defConfig;
var baseURL = defConfig && defConfig.baseURL;
var fileName = defConfig && defConfig.fileName;
this.ss
.load((baseURL || './assets/tinymce/') + (fileName || 'tinymce.min.js'))
.getChangeEmitter()
.subscribe(function () { return _this.initDelay(); });
};
TinymceComponent.prototype.ngOnChanges = function (changes) {
if (this._instance && changes.config) {
this.destroy();
this.initDelay();
}
};
TinymceComponent.prototype.ngOnDestroy = function () {
this.destroy();
};
// reuse-tab: http://ng-alain.com/components/reuse-tab#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
TinymceComponent.prototype._onReuseInit = function () {
this.destroy();
this.initDelay();
};
TinymceComponent.prototype.writeValue = function (value) {
// value should be NOT NULL
this.value = value || '';
if (this._instance) {
this._instance.setContent(this.value);
}
};
TinymceComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
TinymceComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
TinymceComponent.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
this.setDisabled();
};
TinymceComponent.decorators = [
{ type: Component, args: [{
selector: 'tinymce',
template: "<textarea id=\"{{id}}\" [placeholder]=\"placeholder\" class=\"tinymce-selector\"></textarea>\n<div class=\"loading\" *ngIf=\"load\">\n <ng-container *ngIf=\"_loading; else _loadingTpl\">{{_loading}}</ng-container>\n</div>\n",
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return TinymceComponent; }),
multi: true,
},
],
changeDetection: ChangeDetectionStrategy.OnPush,
styles: ["tinymce .tinymce-selector { display: none; }"]
}] }
];
/** @nocollapse */
TinymceComponent.ctorParameters = function () { return [
{ type: TinymceOptions },
{ type: ScriptService },
{ type: ChangeDetectorRef }
]; };
TinymceComponent.propDecorators = {
config: [{ type: Input }],
placeholder: [{ type: Input }],
disabled: [{ type: Input }],
loading: [{ type: Input }],
delay: [{ type: Input }],
ready: [{ type: Output }]
};
return TinymceComponent;
}());
var NgxTinymceModule = /** @class */ (function () {
function NgxTinymceModule() {
}
NgxTinymceModule.forRoot = function (options) {
return {
ngModule: NgxTinymceModule,
providers: [
ScriptService,
{ provide: TinymceOptions, useValue: options },
],
};
};
NgxTinymceModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [TinymceComponent],
exports: [TinymceComponent],
},] }
];
return NgxTinymceModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { ScriptService as ɵa, TinymceComponent, TinymceOptions, NgxTinymceModule };
//# sourceMappingURL=ngx-tinymce.js.map