[Django]-Which Stack-Overflow style Markdown (WMD) JavaScript editor should we use?

by

27👍

✅

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. Meets most of my requirements.
  2. Looks like Stack Overflow’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 the Stack Overflow version

There are a few differences from the Stack Overflow 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 Microsoft Word. That is, 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.

👤Edan Maor

7👍

Well, this question (and solutions) are getting pretty old, so I thought maybe I’d put something up to date here. 🙂

It’s the beginning of 2014, and when I reached the same problem I eventually used PageDown-Bootstrap. It’s a Twitter Bootstrap-based WMD editor, with fully customizable Style Bar (Button Bar).

There’s also an alternative called Bootstrap-Markdown, which also looks very promising.

👤Ory Band

5👍

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.

👤Chris Lawlor

1👍

Not sure if it fully fits to the old requirements, but another solution available in 2014 is the Open Source Markdown editor with preview licensed under Apache 2.0 and created by topten software.

Online demo is available here: http://www.toptensoftware.com/markdowndeep/dingus

👤xmojmr

0👍

Standard Common Markdown includes a standalone javascript file to convert markdown to html. It is easy to implement as shown in the official demo or this plunker.

Roughly:

<script src="//jgm.github.io/stmd/js/stmd.js"></script>
...
var reader = new stmd.DocParser();
var writer = new stmd.HtmlRenderer();
...
var parsed = reader.parse("Some **markdown** text");
var result = writer.renderBlock(parsed);
👤Ben Haley

Leave a comment