///
///
class CkeditorUploadPlugin {
constructor(private domContentBlock:DomContentBlock) {
}
registerPlugin(editor:CKEDITOR.editor) {
if (!this.domContentBlock.hasRenuoUpload()) return true;
editor.addCommand('renuoUpload', {
exec: (editorExec) => {
this.openDropzone(editorExec);
return true;
}
});
editor.ui.addButton('uploadButton', {
label: 'File/Image Upload',
command: 'renuoUpload',
toolbar: 'insert',
icon: 'image'
});
}
private closeDropzone():void {
jQuery('#dropzone-overlay').remove();
}
private openDropzone(editor:CKEDITOR.editor):void {
const dropzone = this.createDropzoneHTML();
this.createDropzoneCSS();
jQuery('#dropzone-overlay').click((event) => {
if ($(event.target).attr('id') !== 'dropzone-overlay') return;
this.closeDropzone();
});
// tslint:disable:no-unused-expression
new window.RenuoUpload(dropzone, this.dropzoneOptions(), (event:RenuoUploadEvent) => {
// tslint:enable:no-unused-expression
const htmlElement:HTMLElement = new RenuoUploadHtmlGenerator(event).generateElement();
const domElement = new CKEDITOR.dom.element(htmlElement);
editor.insertElement(domElement);
this.closeDropzone();
});
}
private dropzoneOptions() {
return {
acceptedFiles: 'image/*,application/pdf',
uploadMultiple: false,
maxFiles: 1
};
}
private createDropzoneHTML() {
const dropzoneHTML = jQuery('');
const renuoUploadCredentials = this.domContentBlock.renuoUploadCredentials;
const dropzone = jQuery(dropzoneHTML).find('.renuo-upload');
dropzone.attr('data-apikey', renuoUploadCredentials.apiKey)
.attr('data-signingurl', renuoUploadCredentials.signingUrl);
jQuery('body').append(dropzoneHTML);
return dropzone;
}
private createDropzoneCSS() {
jQuery('').appendTo('head');
}
}