Skip to content

Add upload-image toolbar #728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ruesin wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add upload-image toolbar #728

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
170c350
fix escape error
ruesin Nov 29, 2018
93f0d7a
add upload-image toolbar
ruesin Nov 29, 2018
1b50ce6
catch json-parse error
ruesin Nov 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 74 additions & 6 deletions src/js/simplemde.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ var bindings = {
"toggleHeadingSmaller": toggleHeadingSmaller,
"toggleHeadingBigger": toggleHeadingBigger,
"drawImage": drawImage,
"uploadImage": uploadImage,
"toggleBlockquote": toggleBlockquote,
"toggleOrderedList": toggleOrderedList,
"toggleUnorderedList": toggleUnorderedList,
Expand Down Expand Up @@ -72,7 +73,7 @@ var getBindingName = function(f) {
var isMobile = function() {
var check = false;
(function(a) {
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true;
})(navigator.userAgent || navigator.vendor || window.opera);
return check;
};
Expand Down Expand Up @@ -171,7 +172,7 @@ function getState(cm, pos) {
ret.link = true;
} else if(data === "tag") {
ret.image = true;
} else if(data.match(/^header(\-[1-6])?$/)) {
} else if(data.match(/^header(-[1-6])?$/)) {
ret[data.replace("header", "heading")] = true;
}
}
Expand Down Expand Up @@ -644,6 +645,63 @@ function drawImage(editor) {
_replaceSelection(cm, stat.image, options.insertTexts.image, url);
}

/**
* Action for upload an img.
*
*/
function uploadImage(editor) {

var _input_id = "simplemde-editor-upload-image-input-id";

var _history = document.getElementById(_input_id);
if(_history) {
editor.options.element.parentNode.removeChild(_history);
}

var _html = document.createElement("input");
_html.setAttribute("type", "file");
_html.setAttribute("accept", "image/gif,image/jpeg,image/jpg,image/png,image/svg");
_html.setAttribute("id", _input_id);
_html.setAttribute("style", "display:none");

editor.options.element.parentNode.appendChild(_html);

var _input = document.getElementById(_input_id);

_input.onchange = function() {
var url = editor.options.uploadUrl || "/upload";
var file = _input.files[0];
var formData = new FormData();
formData.append("image", file);

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", url, true);
xmlhttp.send(formData);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
try {
var res = JSON.parse(xmlhttp.responseText);
if(res.url) {
editor.codemirror.replaceSelection("![" + (res.name || file.name) + "](" + res.url + ")");
}
} catch (e) {
editor.codemirror.replaceSelection("![]()");
}
}
};

editor.options.element.parentNode.removeChild(_input);
};

if(document.all) {
_input.click();
} else {
var e = document.createEvent("MouseEvents");
e.initEvent("click", false, true);
_input.dispatchEvent(e);
}
}

/**
* Action for drawing a table.
*/
Expand Down Expand Up @@ -900,8 +958,8 @@ function _toggleLine(cm, name) {
var startPoint = cm.getCursor("start");
var endPoint = cm.getCursor("end");
var repl = {
"quote": /^(\s*)\>\s+/,
"unordered-list": /^(\s*)(\*|\-|\+)\s+/,
"quote": /^(\s*)>\s+/,
"unordered-list": /^(\s*)(\*|-|\+)\s+/,
"ordered-list": /^(\s*)\d+\.\s+/
};
var map = {
Expand Down Expand Up @@ -1008,7 +1066,7 @@ function _cleanBlock(cm) {

for(var line = startPoint.line; line <= endPoint.line; line++) {
text = cm.getLine(line);
text = text.replace(/^[ ]*([# ]+|\*|\-|[> ]+|[0-9]+(.|\)))[ ]*/, "");
text = text.replace(/^[ ]*([# ]+|\*|-|[> ]+|[0-9]+(.|\)))[ ]*/, "");

cm.replaceRange(text, {
line: line,
Expand Down Expand Up @@ -1177,6 +1235,12 @@ var toolbarBuiltInButtons = {
title: "Insert Image",
default: true
},
"upload-image": {
name: "upload-image",
action: uploadImage,
className: "fa fa-file-image-o",
title: "Upload Image"
},
"table": {
name: "table",
action: drawTable,
Expand Down Expand Up @@ -1532,7 +1596,7 @@ function isLocalStorageAvailable() {
try {
localStorage.setItem("smde_localStorage", 1);
localStorage.removeItem("smde_localStorage");
} catch(e) {
} catch (e) {
return false;
}
} else {
Expand Down Expand Up @@ -1894,6 +1958,7 @@ SimpleMDE.toggleOrderedList = toggleOrderedList;
SimpleMDE.cleanBlock = cleanBlock;
SimpleMDE.drawLink = drawLink;
SimpleMDE.drawImage = drawImage;
SimpleMDE.uploadImage = uploadImage;
SimpleMDE.drawTable = drawTable;
SimpleMDE.drawHorizontalRule = drawHorizontalRule;
SimpleMDE.undo = undo;
Expand Down Expand Up @@ -1950,6 +2015,9 @@ SimpleMDE.prototype.drawLink = function() {
SimpleMDE.prototype.drawImage = function() {
drawImage(this);
};
SimpleMDE.prototype.uploadImage = function() {
uploadImage(this);
};
SimpleMDE.prototype.drawTable = function() {
drawTable(this);
};
Expand Down