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?

4
  • 6
    The image upload feature is heavily tied to the external image hosting service SO is using. It could well be that this part of the code is not Open Source
    – Pekka
    Oct 21, 2010 at 10:43
  • 3
    +1 @Pekka; see meta.stackexchange.com/questions/4376/…
    – Pops
    Oct 21, 2010 at 12:05
  • Hm, see also meta.stackexchange.com/questions/4168/…
    – Pops
    Oct 21, 2010 at 13:02
  • Seems like if it is just using the imgurl API. It may be closed source, but the image-storage side of it wouldn't necessarily have to be. Jul 20, 2011 at 17:43

1 Answer 1

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
  • 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, 2013 at 5:24

You must log in to answer this question.

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