How to add upload utility to wmd editor?

Asked 5/11, 2009 at 14:24 Answered 18/9, 2012 at 7:0

Has anyone succeeded to do this?

Buckeye answered 5/11, 2009 at 14:24 Comment(2)

Could you be a bit more specific? Are you trying to add a pre-built utility or are you trying to write your own one? – Tichonn 5/11, 2009 at 14:27

Does it matter in what version of WMD? – Hapten 13/11, 2009 at 5:4

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.

Tompion answered 18/11, 2009 at 22:8 Comment(1)

I'd also be very interested in seeing the code for all of this as I need to implement an upload as per stackoverflow. – Egoist 1/8, 2011 at 15:9

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.

Octavo answered 18/9, 2012 at 7:0 Comment(1)

Could You please, elaborate more, not just dropping an offsite link? having in mind, that site dead. At least at the moment. – Oletaoletha 20/5, 2014 at 9:3

Add a button to the control panel of WMD.
Search for the following string to find the place where buttons are being added: italicButton.XShift
In my version, the function is in class SpritedButtonRow and is called build.

Ignore the setup and textOp attributes. XShift is the position of the button image in the css sprite that comes with WMD, Instead of that, give the button a class and in the class specify the background image. Then Just add an onclick event to the button that will do what you need it to do.
But, I don't think an upload button should be inside a text editor, does not make sense.

Hapten answered 13/11, 2009 at 5:13 Comment(0)

Recommended topics

Hot tags