'WMD' Web Markdown & how to Implement an image upload facility

I'm developing a site that uses MarkDown and WMD javascript tools which currently caters for images that are already hosted, but I'd like to be able to offer an image upload facility within WMD, as per Stack Overflow, but don't know how to go about this.

Does an开发者_如何学编程yone know how this can be implemented? My site is being developed, using ASP.NET MVC, and I'm fine with the server side of uploading an image etc, but it's how to hook this into the the javascript WMD editor (and potentially the AJAX element of it) that I'm stuck on.

We have recently released our refactored version of WMD; you can find it at http://code.google.com/p/pagedown/.

Everything that is non-standard about Stack Overflow's usage now happens via plugin hooks, and this includes our file uploader. So you can just use the same hook to implement this. Have a look at the documentation; the "hooking up" part boils down to this:

editor.hooks.set("insertImageDialog", function (callback) {
    var dia = createMyDialog();
    dia.find(".ok-button").click(function () {
        var url = getChosenImageUrl();
        removeMyDialog();
        callback(url);
    });
    dia.find(".cancel-button").click(function () {
        removeMyDialog();
        callback(null);
    });
    return true; // tell the editor not to show the standard dialog
});

As to the actual uploading, we currently use a pretty ugly solution that works like this:

• The actual file upload form has its target attribute set to a hidden iframe, so submitting the form doesn't send you to a different page.
• There's a function defined on the global object that removes the dialog and calls the callback. This is the ugly part; this method is anything but clean, but it works fine.
• The upload controller action returns a minimal HTML document with a piece of JavaScript code that calls this function (via window.parent, since we have to break out of the iframe – note that this requires the upload URL to have the same origin as the page!) with the address of the newly created image.

If you're going to implement this in a similar fashion, take a look at this post on Meta Stack Overflow regarding a nasty Chrome bug that can appear, and a workaround for it.