Which StackOverflow-style MarkDown (WMD) javascript editor should I use?

Question

Background

I'm working on an application which requires user-entered content, and I've decided to use a StackOverflow-style MarkDown editor. After researching this topic for the last few days, I realize there are numerous forks of the base WMD editor, some with a few basic enhancements and some with serious differences from the StackOverflow one.

Since this will be the heart of the application, I'd like to start with the best code base I can. I'd be happy if anyone can recommend which one of the many solutions out there best fits my needs.

Below is requirements, plus what I've managed to find already. I'm hoping this question will help me decide which version to go with, and maybe help me discover a port out there that's an even better fit for my needs.

---

The requirements for my project

• Live Preview
• Multiple editors on the same page (not know how many in advance, since the user can dynamically add another editing box).
• Ability to extend with extra buttons (I'd like a button to upload a picture, instead of just adding an img url).
• Ability to dynamically show/hide the edit box (and only see the preview box).
• Not an absolute must, but I'd prefer to stick as close to StackOverflow's look and feel, since it's well known.
• Don't know if this matters, but the backend is written in Django.

Editors I've looked at

Here are a few of the code bases I've looked at, with thoughts. Obviously, I might be missing another solution out there.

• The derobins version. From what I can tell, this is the official StackOverflow version. Seems like it doesn't support multiple editors on one page.
• JQuery.MarkEdit. Looks very good, but is pretty different from the StackOverflow version.
• MooWMD. Looks like the winner right now, but I'm a little concerned since it looks less active/hackable than MarkEdit.
• The wmd-new version. Not sure, looks like an old codebase without much use.
• The SocialSite branch. Seems like it's not for public use.

Answer 1

For the live preview part, the Showdown library is pretty easy to work with (and as Edan points out, is included in the codebase)

You use it something like this (don't need to use jQuery if you don't want to)

$(document).ready(function(){
    var converter = new Attacklab.showdown.converter();
    function update_description_preview(){
        $('#description-preview').html(converter.makeHtml($("#id_description").val()));
    }
    update_description_preview();

    $("#id_description").keyup(function(){
        update_description_preview();
    });
});

The update_description_preview function uses the converter object to read the markdown in the #id_description element, and dumps it into the #description-preview element.

Here I am calling the function right after it is defined to initialize the preview windows (there was some text pre-loaded in the editor)

Last bit is just registering the function with the keyup event.

Answer 2

In the end, after looking around a bit more for a ready-made editor, I settled on the OpenLibrary WMD port, located at http://github.com/openlibrary/wmd.

The reasons I chose this editor

1. Answers most of my requirements.
2. Looks like StackOverflow's editor. There are a few behavioral differences (see below).
3. Is built on top of JQuery (and doesn't require MooTools, which is a plus over the other serious contender, MooWMD).

I ended up implementing the functionality which shows/hides the editbox myself, which proved pretty easy for the most part. I haven't extended the editor with any buttons, which I'm sure will require some messing around in its source, but I don't think it will be too big a deal.

Differences from StackOverflow version

There are a few differences from the StackOverflow editor:

1. Single enters at the end of lines cause a <br/>, instead of being considered one paragraph. I happen to prefer it this way, so I'm fine with this change.
2. Numbered lists are auto-numbered, ala Word. I.e., hitting enter after writing "1. first item" will automatically get you a line that starts with "2. ". This is also a change I really like.

Well, I hope this helps anyone looking for a similar editor. If I end up customizing the editor, I'll create my own branch (it's licensed under the MIT license), but right now I'm getting away without tinkering with the source code.