Which JavaScript markup editor (WMD) should I use?

Question

Background

I am working on an application that requires user input, and I decided to use the Markdown style editor. After exploring this topic over the past few days, I understand that there are numerous forks of the WMD base editor, some of which have several basic improvements, and some with major differences from.

Since this will be the foundation of the application, I would like to start with the best code base I can. I would be happy if anyone could recommend which of the many solutions works best for me.

Below are the requirements, as well as what I managed to find already. I hope this question helps me decide which version to go with, and perhaps helps me open a port that is even better suited to my needs.

---

Requirements for my project

• Live Preview
• Several editors on one page (I don’t know how many in advance, since the user can dynamically add another editing window).
• The ability to expand with additional buttons (I would like the button to load the image, and not just add the img URL).
• Ability to dynamically show / hide the editing window (and see only the preview window).
• Not an absolute necessity, but I would rather stick to the look and feel of Stack Overflow, as it is well known.
• I don't know if this matters, but the backend is written in Django.

Editors I Viewed

Here are a few code basics I looked at with thoughts. Obviously, I could skip another solution.

• derobins . From what I can say, this is the official version. It doesn't seem to support multiple editors on the same page.
• jQuery.MarkEdit . It looks very good, but quite different from the version.
• MooWmd . It seems like a winner right now, but I'm a little worried that it looks less active / hacked than MarkEdit.
• wmd-new . Not sure if it looks like an old code base without much use.
• SocialSite affiliate . It seems that this is not for public use.

Answer 1

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

The reasons why I chose this editor

• Meets most of my requirements.
• Looks like an editor. There are several differences in behavior (see below).
• Created on top of jQuery (and does not require MooTools , which is a plus for another serious rival, mooWMD ).

I ended up implementing the functionality that the editor itself shows / hides, which turned out to be pretty simple for the most part. I did not expand the editor with any buttons, which I’m sure will require some messing around in its source, but I don’t think it would be too big a deal.

Version Differences

There are several differences from the editor:

• A single entry at the end of lines causes <br/> instead of being counted as a single paragraph. I happen to prefer it that way, so I'm fine with this change.
• Numbered lists are automatically numbered, as well as Microsoft Word. That is, by pressing Enter after writing "1. first element", you will automatically get a line starting with "2.". This is also a change that I really like.

Well, hopefully this will help anyone looking for a similar editor. If I finish setting up the editor, I will create my own branch (it will be licensed under the MIT license), but now I am leaving without redoing the source code.

Answer 2

Well, this question (and solutions) is getting quite old, so I thought maybe I would put something modern. :)

This is the beginning of 2014, and when I achieved the same problem, I ended up using PageDown-Bootstrap . This is a Bootstrap-based WMD editor on Twitter, with a fully customizable style bar (button bar).

There is also an alternative to Bootstrap-Markdown , which also looks very promising.

Answer 3

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

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

 $(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 markdowns in the #id_description element and uploads it to the # description-preview element.

Here I call the function immediately after it is defined to initialize the preview windows (the text was preloaded in the editor)

The last bit simply registers the function with the keyup event.

Answer 4

Not sure if it fully complies with the old requirements, but another solution available in 2014 is Markdown, an open source editor with preview licensed under Apache 2.0 and created by topten software.

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

Answer 5

Standard Plain Markdown includes a stand-alone javascript file for converting a metodda to html. It is easy to implement, as shown in the official demo or it is a plunker .

Roughly speaking:

 <script src="//jgm.imtqy.com/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);