mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-09-17 23:05:47 +00:00
Refactored WYSIWYG editor image upload code
Added sketchy timeout to fix images being pasted at end of page. Fixes #489
This commit is contained in:
parent
09936566dd
commit
212f924ffa
@ -4,49 +4,51 @@ const Code = require('../code');
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Handle pasting images from clipboard.
|
* Handle pasting images from clipboard.
|
||||||
* @param e - event
|
* @param {ClipboardEvent} event
|
||||||
* @param editor - editor instance
|
* @param editor
|
||||||
*/
|
*/
|
||||||
function editorPaste(e, editor) {
|
function editorPaste(event, editor) {
|
||||||
if (!e.clipboardData) return;
|
if (!event.clipboardData || !event.clipboardData.items) return;
|
||||||
let items = e.clipboardData.items;
|
let items = event.clipboardData.items;
|
||||||
if (!items) return;
|
|
||||||
for (let i = 0; i < items.length; i++) {
|
for (let i = 0; i < items.length; i++) {
|
||||||
if (items[i].type.indexOf("image") === -1) return;
|
if (items[i].type.indexOf("image") === -1) continue;
|
||||||
|
event.preventDefault();
|
||||||
let file = items[i].getAsFile();
|
|
||||||
let formData = new FormData();
|
|
||||||
let ext = 'png';
|
|
||||||
let xhr = new XMLHttpRequest();
|
|
||||||
|
|
||||||
if (file.name) {
|
|
||||||
let fileNameMatches = file.name.match(/\.(.+)$/);
|
|
||||||
if (fileNameMatches) {
|
|
||||||
ext = fileNameMatches[1];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let id = "image-" + Math.random().toString(16).slice(2);
|
let id = "image-" + Math.random().toString(16).slice(2);
|
||||||
let loadingImage = window.baseUrl('/loading.gif');
|
let loadingImage = window.baseUrl('/loading.gif');
|
||||||
editor.execCommand('mceInsertContent', false, `<img src="${loadingImage}" id="${id}">`);
|
let file = items[i].getAsFile();
|
||||||
|
setTimeout(() => {
|
||||||
|
editor.insertContent(`<p><img src="${loadingImage}" id="${id}"></p>`);
|
||||||
|
uploadImageFile(file).then(resp => {
|
||||||
|
editor.dom.setAttrib(id, 'src', resp.thumbs.display);
|
||||||
|
}).catch(err => {
|
||||||
|
editor.dom.remove(id);
|
||||||
|
window.$events.emit('error', trans('errors.image_upload_error'));
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Upload an image file to the server
|
||||||
|
* @param {File} file
|
||||||
|
*/
|
||||||
|
function uploadImageFile(file) {
|
||||||
|
if (file === null || file.type.indexOf('image') !== 0) return Promise.reject(`Not an image file`);
|
||||||
|
|
||||||
|
let ext = 'png';
|
||||||
|
if (file.name) {
|
||||||
|
let fileNameMatches = file.name.match(/\.(.+)$/);
|
||||||
|
if (fileNameMatches.length > 1) ext = fileNameMatches[1];
|
||||||
|
}
|
||||||
|
|
||||||
let remoteFilename = "image-" + Date.now() + "." + ext;
|
let remoteFilename = "image-" + Date.now() + "." + ext;
|
||||||
|
let formData = new FormData();
|
||||||
formData.append('file', file, remoteFilename);
|
formData.append('file', file, remoteFilename);
|
||||||
formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
|
|
||||||
|
|
||||||
xhr.open('POST', window.baseUrl('/images/gallery/upload'));
|
return window.$http.post('/images/gallery/upload', formData).then(resp => (resp.data));
|
||||||
xhr.onload = function () {
|
|
||||||
if (xhr.status === 200 || xhr.status === 201) {
|
|
||||||
let result = JSON.parse(xhr.responseText);
|
|
||||||
editor.dom.setAttrib(id, 'src', result.thumbs.display);
|
|
||||||
} else {
|
|
||||||
console.log('An error occurred uploading the image', xhr.responseText);
|
|
||||||
editor.dom.remove(id);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.send(formData);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function registerEditorShortcuts(editor) {
|
function registerEditorShortcuts(editor) {
|
||||||
@ -375,9 +377,7 @@ module.exports = function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Paste image-uploads
|
// Paste image-uploads
|
||||||
editor.on('paste', function(event) {
|
editor.on('paste', event => { editorPaste(event, editor) });
|
||||||
editorPaste(event, editor);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
return settings;
|
return settings;
|
||||||
|
Loading…
Reference in New Issue
Block a user