scinote-web/app/assets/javascripts/sitewide/tiny_mce_file_upload_plugin.js

134 lines
4 KiB
JavaScript
Raw Normal View History

2019-03-22 20:35:11 +08:00
/* eslint no-underscore-dangle: "off" */
/* eslint no-use-before-define: "off" */
/* eslint no-restricted-syntax: ["off", "BinaryExpression[operator='in']"] */
/* global tinymce I18n HelperModule validateFileSize */
2019-03-22 20:35:11 +08:00
(function() {
'use strict';
tinymce.PluginManager.requireLangPack('customimageuploader');
tinymce.create('tinymce.plugins.CustomImageUploader', {
CustomImageUploader: function(ed) {
2019-03-22 20:35:11 +08:00
var iframe;
var editor = ed;
var textAreaElement = $('#' + ed.id);
function loadFiles() {
let $fileInput;
2020-10-29 15:45:55 +08:00
let hitFileLimit;
$('#tinymce_current_upload').remove();
2020-10-29 15:45:55 +08:00
$fileInput = $('<input type="file" multiple accept="image/*" id="tinymce_current_upload" style="display: none;">').prependTo(editor.container);
$fileInput.click();
$fileInput.change(function() {
let formData = new FormData();
let files = $('#tinymce_current_upload')[0].files;
Array.from(files).forEach(file => formData.append('files[]', file, file.name));
2020-10-29 15:45:55 +08:00
Array.from(files).every(file => {
if (!validateFileSize(file, true)) {
hitFileLimit = true;
return false;
}
});
if (hitFileLimit) {
return;
}
$.post({
url: textAreaElement.data('tinymce-asset-path'),
data: formData,
processData: false,
contentType: false,
success: function(data) {
handleResponse(data);
$('#tinymce_current_upload').remove();
2019-03-22 20:35:11 +08:00
},
error: function(response) {
HelperModule.flashAlertMsg(response.responseJSON.errors, 'danger');
$('#tinymce_current_upload').remove();
2019-03-22 20:35:11 +08:00
}
});
2019-03-22 20:35:11 +08:00
});
}
function handleResponse(response) {
if (response.errors) {
handleError(response.errors.join('<br>'));
2019-03-22 20:35:11 +08:00
} else {
response.images.forEach(el => editor.execCommand('mceInsertContent', false, buildHTML(el)));
updateActiveImages(ed);
2019-03-22 20:35:11 +08:00
}
}
function handleError(error) {
HelperModule.flashAlertMsg(error, 'danger');
2019-03-22 20:35:11 +08:00
}
function buildHTML(image) {
return `<img src="${image.url}"
data-mce-token="${image.token}"
alt="description-${image.token}" />`;
2019-03-22 20:35:11 +08:00
}
// Create hidden field for images
function createImageHiddenField() {
textAreaElement.parent().find('input#tiny-mce-images').remove();
$('<input type="hidden" id="tiny-mce-images" name="tiny_mce_images" value="[]">').insertAfter(textAreaElement);
}
2019-03-22 20:35:11 +08:00
// Finding images in text
function updateActiveImages() {
var images;
var imageContainer = $('#' + editor.id).next()[0];
2019-03-22 20:35:11 +08:00
iframe = $('#' + editor.id).prev().find('.mce-edit-area iframe').contents();
images = $.map($('img', iframe), e => {
return e.dataset.mceToken;
2019-03-22 20:35:11 +08:00
});
if (imageContainer === undefined) {
createImageHiddenField();
2019-04-26 23:37:01 +08:00
}
// Small fix for ResultText when you cancel after change MarvinJS
if (imageContainer === undefined) return [];
imageContainer.value = JSON.stringify(images);
2019-03-22 20:35:11 +08:00
return JSON.stringify(images);
}
// Add a button that opens a window
editor.addButton('customimageuploader', {
tooltip: I18n.t('tiny_mce.upload_window_label'),
icon: 'image',
onclick: loadFiles
2019-03-22 20:35:11 +08:00
});
// Adds a menu item to the tools menu
editor.addMenuItem('customimageuploader', {
text: I18n.t('tiny_mce.upload_window_label'),
icon: 'image',
context: 'insert',
onclick: loadFiles
2019-03-22 20:35:11 +08:00
});
ed.on('NodeChange', function() {
// Check editor status
if (this.initialized) {
updateActiveImages(ed);
}
2019-03-22 20:35:11 +08:00
});
createImageHiddenField();
2019-03-22 20:35:11 +08:00
}
});
2019-03-22 20:42:12 +08:00
tinymce.PluginManager.add(
'customimageuploader',
tinymce.plugins.CustomImageUploader
);
2019-04-26 23:37:01 +08:00
}());