Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-07-04 16:44:28 -06:00
Code Issues Releases Wiki Activity

[wip upload-image] After image upload, insert image markdown template with uploaded image url

Browse Source
This commit is contained in:
Nathanaël Jourdane 2019-03-04 18:10:46 +01:00
parent 3d1e33396f
commit aa39672e4e
1 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/js/easymde.js
View File

@ -188,7 +188,11 @@ function createImageInput(editor) {
imageInput.style.opacity = 0; imageInput.style.opacity = 0;
imageInput.addEventListener('change', function(event) { imageInput.addEventListener('change', function(event) {
for(var i=0; i<event.target.files.length; i++) { for(var i=0; i<event.target.files.length; i++) {
uploadImage(event.target.files[i], editor.options); uploadImage(event.target.files[i], editor.options, function(url) {
afterImageUploaded(editor, url);
}, function(errorStatus, errorStatusText) {
console.log('EasyMDE: error ' + errorStatus + ' when importing image: ' + errorStatusText);
});
} }
}); });
return imageInput; return imageInput;
@ -719,6 +723,18 @@ function drawUploadedImage(editor) {
imageInput.dispatchEvent(new MouseEvent('click')); imageInput.dispatchEvent(new MouseEvent('click'));
} }
/**
* Action executed after an image have been successfully imported on the server.
* @param editor The EasyMDE object
* @param url {string} The url of the uploaded image
*/
function afterImageUploaded(editor, url) {
var cm = editor.codemirror;
var stat = getState(cm);
var options = editor.options;
_replaceSelection(cm, stat.image, options.insertTexts.uploadedImage, url);
}
/** /**
* Action for drawing a table. * Action for drawing a table.
*/ */
@ -1157,8 +1173,13 @@ function humanFileSize(bytes, units) {
* *
* @param file {File} The image to upload as a HTML5 File object (https://developer.mozilla.org/en-US/docs/Web/API/File) * @param file {File} The image to upload as a HTML5 File object (https://developer.mozilla.org/en-US/docs/Web/API/File)
* @param options The EasyMDE options. * @param options The EasyMDE options.
* @param onSuccess {function} A callback function to execute after the image have been successfully uploaded, with parameters:
* - url (string): The URL of the uploaded image.
* @param onError {function} A callback function to execute when the image upload fails, with parameters:
* - errorStatus (number): The status of the response of the request, provided by XMLHttpRequest (see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status).
* - errorStatusText (string): the response string returned by the HTTP server, provided by XMLHttpRequest (see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/statusText).
*/ */
function uploadImage(file, options) { function uploadImage(file, options, onSuccess, onError) {
if (file.size >= options.imageMaxSize) { if (file.size >= options.imageMaxSize) {
var units = options.imageTexts.sizeUnits.split(','); var units = options.imageTexts.sizeUnits.split(',');
alert(options.text.errorImageTooBig alert(options.text.errorImageTooBig
@ -1186,9 +1207,9 @@ function uploadImage(file, options) {
request.onload = function () { request.onload = function () {
if(this.status === 200) { if(this.status === 200) {
console.log('image url: ' + window.location.origin + '/' + this.responseText); onSuccess(window.location.origin + '/' + this.responseText);
} else { } else {
console.log('EasyMDE: Error ' + this.status + ' while importing image: ' + this.statusText.toString()); onError(this.status, this.statusText.toString());
} }
}; };
} }
@ -1430,6 +1451,8 @@ var toolbarBuiltInButtons = {
var insertTexts = { var insertTexts = {
link: ['[', '](#url#)'], link: ['[', '](#url#)'],
image: ['![](', '#url#)'], image: ['![](', '#url#)'],
uploadedImage: ['![](#url#)', ''],
// uploadedImage: ['![](#url#)\n', ''], // TODO: New line insertion doesn't work here.
table: ['', '\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n'], table: ['', '\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n'],
horizontalRule: ['', '\n\n-----\n\n'], horizontalRule: ['', '\n\n-----\n\n'],
}; };