Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-08-10 18:52:44 -06:00
Code Issues Releases Wiki Activity

[wip upload-image] Add image icon to open the browse-file window

Browse Source
This commit is contained in:
Nathanaël Jourdane 2019-03-04 17:05:22 +01:00
parent 07d96c3842
commit 11e613b3d5
1 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/js/easymde.js
View File

@ -170,6 +170,30 @@ function createTooltip(title, action, shortcuts) {
return tooltip; return tooltip;
} }
/**
* Create the input element (ie. <input type='file'>) used to open the
* browse-file window in order to allow the user to select an image to be
* imported to the server. Used among with the 'import-image' icon.
* @param editor {Object} the EasyMDE object
* @returns Node The created input DOM element.
*/
function createImageInput(editor) {
var imageInput = document.createElement('input');
imageInput.className = 'imageInput';
imageInput.type = 'file';
imageInput.multiple = true;
imageInput.name = 'image';
imageInput.accept = editor.options.imageAccept;
imageInput.style.display = 'none';
imageInput.style.opacity = 0;
imageInput.addEventListener('change', function(event) {
for(var i=0; i<event.target.files.length; i++) {
console.log('file name: ' + event.target.files[i].name);
}
});
return imageInput;
}
/** /**
* The state of CodeMirror at the given position. * The state of CodeMirror at the given position.
*/ */
@ -686,6 +710,15 @@ function drawImage(editor) {
_replaceSelection(cm, stat.image, options.insertTexts.image, url); _replaceSelection(cm, stat.image, options.insertTexts.image, url);
} }
/**
* Action for opening the browse-file window to upload an image to a server.
*/
function drawUploadedImage(editor) {
// TODO: Draw the image template with a fake url, ie: '![](importing foo.png...)'
var imageInput = editor.gui.toolbar.getElementsByClassName('imageInput')[0];
imageInput.dispatchEvent(new MouseEvent('click'));
}
/** /**
* Action for drawing a table. * Action for drawing a table.
*/ */
@ -1252,6 +1285,12 @@ var toolbarBuiltInButtons = {
title: 'Insert Image', title: 'Insert Image',
default: true, default: true,
}, },
'upload-image': {
name: 'upload-image',
action: drawUploadedImage,
className: 'fa fa-image',
title: 'Import an image',
},
'table': { 'table': {
name: 'table', name: 'table',
action: drawTable, action: drawTable,
@ -1448,6 +1487,10 @@ function EasyMDE(options) {
options.minHeight = options.minHeight || '300px'; options.minHeight = options.minHeight || '300px';
// import-image default configuration
options.imageAccept = options.imageAccept || 'image/png, image/jpeg';
// Change unique_id to uniqueId for backwards compatibility // Change unique_id to uniqueId for backwards compatibility
if (options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != '') if (options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != '')
options.autosave.uniqueId = options.autosave.unique_id; options.autosave.uniqueId = options.autosave.unique_id;
@ -1844,6 +1887,9 @@ EasyMDE.prototype.createToolbar = function (items) {
toolbarData[item.name || item] = el; toolbarData[item.name || item] = el;
bar.appendChild(el); bar.appendChild(el);
if (item.name === 'upload-image') {
bar.appendChild(createImageInput(self));
}
})(items[i]); })(items[i]);
} }