Menu
Has anyone succeeded to do this?
252
I accomplished this by replacing Util.prompt with my own jquery.dialog method. The prompt function takes a parameter as a callback, making it easy to create a drop-in replacement.
if (isImage) {
// OLD: util.prompt(imageDialogText, imageDefaultText, makeLinkMarkdown);
// WMD_IMAGE_GALLERY_URL loaded from a global settings elsewhere
util.imageGallery(WMD_IMAGE_GALLERY_URL, makeLinkMarkdown);
}
else {
util.prompt(linkDialogText, linkDefaultText, makeLinkMarkdown);
}
If you're interested, I wrote a blog entry about it (with pictures!) which has some more sample code as well as some of the problems/solutions I encountered in implementing this.
113
The following hack requires use of jQuery, jQuery UI and Mike Alsup's jQuery Form Plugin for performing AJAX file uploads. The hack works with the linked versions (jQ 1.7.2 and jQUI 1.8.20). I can't guarantee compatibility with other versions.
In your <head>, you'll need to include the dependencies:
<script type='text/javascript' src='jquery.min.js'></script>
<link href='theme/jquery-ui.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='jquery-ui.js'></script>
<script type='text/javascript' src='wmd/showdown.js'></script>
<script type='text/javascript' src='wmd/wmd.js'></script>
<link type='text/css' rel='stylesheet' href='wmd/wmd.css'/>
<script type='text/javascript' src='jquery.form.js'></script>
We actually need to make a single change to wmd.js.
Go on in there and search (ctrl+f) for var form = doc.createElement("form");
Immediately following this line, assign the form an id, dialogform will do: form.id = "dialogform";
Now on the front end, run:
$(document).ready(function(){
$("#wmd-image-button").live("click",function(){
setTimeout(function(){
$(".wmd-prompt-dialog").css({"opacity": "0", display: "none"});
}, 100);
var $div = $("<div>");
var $form = $("<form>").attr({action: "submit_image.php", method: "post"})
var $file = $("<input/>").attr({type: "file", name: "image"});
var $name = $("<input/>").attr({type: "text", name: "name", placeholder: "Name"});
var $submit = $("<input/>").attr("type", "submit");
$form.append($name, $file, $submit).ajaxForm(function(r) {
r = $.parseJSON(r);
if(r.success){
$("#dialogform input[type='text']").val(r.filename);
$("#dialogform input[value='OK']").trigger("click");
$div.dialog("close");
}
});
$div.append($form).dialog({title: "Upload Image"});
});
$("#wmd-link-button").live("click", function(){
setTimeout(function(){
$(".wmd-prompt-dialog").css("opacity", "1");
}, 100);
});
});
Remember, the post was written for jQuery 1.7.2, and live() has since been deprecated. Please switch to on() if you're using a more recent version of jQuery
And on the backend, in submit_image.php:
$f = $_FILES['image'];
$p = $_POST;
$allowedTypes = array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF);
$detectedType = exif_imagetype($f['tmp_name']);
if(in_array($detectedType, $allowedTypes)){
$pi = pathinfo($f['name']);
$ext = $pi['extension'];
$target = "img/" . strtolower(str_replace(" ", "-", $p['name'])) . "." . $ext;
if(move_uploaded_file($f['tmp_name'], $target)){
$returnArr = array(
"success" => true,
"filename" => site_url($target)
);
echo json_encode($returnArr);
}
else echo json_encode(array("success" => false));
}
else echo json_encode(array("success" => false, "msg" => "Invalid File Type."));
Hopefully that will get you started. This was written a couple of years ago, when my javascript skills were sub-par! Haha. I previously had this on a blog (which is now dead), with step-by-step instructions and explanations; lots of unnecessary fluff. Thanks @Kamiccolo for bringing this link to my attention. I had to consult the way-back-machine in order to revive it.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
