Integrated Markdown WYSIWYG text editor

Question

In looking for a straightforward WYSIWYG editor for Markdown code, I am not finding a comparible UI to that of CkEditor, TinyMCE, ect.

Specifically, the Markdown "WYSIWYG" editors that are often recommended (such as posts like this ) are not pure WYSIWYG editors in the sense that users either still write raw Markdown ( MarkItUp ) or go to the other extreme of having in-line editing without standard controls ( Hallo ).

I need something in-between.

I'm looking for a Markdown editor that looks and functions like a stripped down CkEditor text box, and that accepts and outputs Markdown. There should be a toolbar with a minimum set of formatting options (B, I, U, lists, ect), and the text entry area should show the converted Markdown, not the raw code. There should be a Source button that will allow users to edit the raw Markdown, but even that is optional. Ex:

I get the reason for Markdown/wiki, ect - the security it offers. I don't mind entering raw code like here at SE, but my users are not geeks and do not find this enjoyable. They don't want to see * * * ___ and spaces mixed in with their text. They are used to "Word" style editing, and are most productive in that environment.

So - is there a truly integrated WYSIWYG editor for Markdown? I'm writing in a PHP, so something that I can invoke with a class would be perfect.

---

Sept 23, 2015 Update

CKEditor now has a Markdown addon that does this exact thing. The addon project is hosted on github.

Screenshots:

---

Apr 13, 2015 Update
Someone professing to develop CKEditor says that the appearance of CommonMark is a game changer, and we could possibly see a proper markup interface for CKEditor (read comments for the full story).

---

Feb 6, 2015 Update

CKEditor now comes with a plugin that outputs (and accepts as input) BBCode.

Demo: http://ckeditor.com/demo#bbcode

Answer 1

I was researching in this subject the other day and I haven't found any decent WYSIWYG editor with Markdown output. In fact, first you have to have to create a WYSIWG Markdown editor is WYSIWG HTML editor and there are just few of them that are usable on the market.

There's a chance that you'll be able to create dataProcessor for CKEditor that will change HTML editor into Markdown editor. We've got a plugin for BBCode that works like this (check out http://nightly-v4.ckeditor.com/3737/samples/bbcode.html).

All you have to do is implement this interface http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor. If you check BBCode plugin's code you'll see some hacks and tricks, because unfortunately current CKEditor's architecture isn't ready (yet) to create such a data processor. However, I believe that if you want to provide only few styling options you should be able to implement Markdown support pretty quickly.

Answer 2

SimpleMDE, a newcomer, may be the answer. I've been searching for something just like this for a month now. I'm surprised that this does not show up higher in search results. I had to go through a notice on lepture/editor to find this.

Answer 3

EDIT Sept 23, 2015

CKEditor now has a Markdown addon that does this exact thing. The addon project is hosted on github.

Screenshots:

---

As posted in my Feb 6, 2015 update, CKEditor now includes plugins that allow BBCode input and output.

A demo is available here: http://ckeditor.com/demo#bbcode

EDIT Apr 13, 2015:
Someone professing to develop CKEditor says that the appearance of CommonMark is a game changer, and we could possibly see a proper markup interface for CKEditor (read comments for the full story).

Answer 4

Pen is a new (active as of 2014) WYSIWYG editor that outputs Markdown.
It's not perfect—I've had issues with pasting HTML there—but it works.

Edit: Sorry! It doesn't output Markdown. Walery Strauch pointed out in the comments that the Markdown formatting signs I saw were actually CSS pseudo element rules:

Still, I'll leave it here as an option since some people upvoted this answer and it may have been of use to somebody.

Answer 5

I implemented a very simple editor that allows the contents of a <textarea> that contains Markdown to be edited in a WYSIWYG fashion.

I used Hallo. I don't think its web site makes it obvious that it is not itself a Markdown WYSIWYG editor but the demo does forge the path to one.

Hallo allows WYSIWYG editing of the HTML inside a <div>. I used javascript to hide any <textarea> blocks that have a specific wysiwyg CSS class, replacing it with a <div> and copying the contents of the <textarea> into the <div>. The copying runs through Showdown which produces HTML from Markdown.

Another Javascript routine reacts every time the <div> contents change. It copies the contents back into the (now hidden) <textarea>. The content is run through to-markdown to convert from HTML to Markdown.

If the <textarea> is a field in a <form>, then the edited Markdown will be sent to the server when that form is submitted.

The inspiration for this comes from the Hallo Markdown Example, specifically the editor.js file. I used that as a basis for my own script along with hallo.js, showdown.js and to-markdown.js.

My script, wysiwyg.js is a derivative of editor.js from the Hallo Markdown Example. Some points to note:

• I use this in a Rails application (not that that matters)
• It runs on ready and also on page:load, the latter because Rails uses Turbolinks
• It runs on ajaxComplete because I use Ajax for form error reports
• There are other dependencies: JQueryUI and Rangy (Rails users can avail of the gems jquery-ui-rails and rangy-rails).
• Also Font Awesome is used for the tool bar icons. The version of hallo.js used by the demo is out of date (it uses an old version of Font Awesome) - use hallo.js from GitHub instead.

You only need to add CSS class='wysiwyg' to any <textarea> to enable WYSIWYG on it. The <textarea> should conain Markdown formatted text.

I would expect that wysiwyg.js could be easily adapted to use another editor if you don't like Hallo as long as it works on the HTML in a <div>. There are quite a few to choose from but not all are as lightweight as Hallo.

A smilar piece of work that I found is markdown-html-form. It uses the same Showdown and to-markdown.

Answer 6

I am also looking for a markdown editor that is described at the top of this thread

Have you seen "markdown tools": http://md-wysiwyg.sourceforge.net/

Demo: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

That seems pretty close to what we are looking for, it does a reasonable job of taking your WYSIWYG rich text and outputting markdown. However it failed on an encoding exception when I pasted in some rich text from a google doc.