6

I am looking for the code for the Web Markdown (WMD) editor that implements the file upload feature currently provided by Stack Overflow. I tried using the code at http://github.com/derobins/wmd, but it does not have the image upload feature.
Can someone please provide me a link to the latest version of the code?

3

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.

  • 1
    Works great! I used the bootstrap WMD editor and the Laravel framework so I had to change a thing or 2. But I used your idea. – Mood Mar 15 '13 at 5:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .