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

Solution 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.

Solution 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.

Solution 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).

Solution 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.

Solution 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.

View more solutions

Comments

[Chris]

Ahola Editor, as suggested in this answer to the SO question you link to is a HTML5 WYSIWYG editor which seems to do exactly what you are after. It even has a hint of the Office ribbon. Is there a reason why you have discounted this?

[a coder]

Ahola is edit-in-place. See the image in my post - we need a static box with limited formatting options that will display on a dedicated edit page (with more options than just this text box). It will confuse users to EIP one bit of text, then have to still go to another section to edit other non-text areas. It works better in our environment to have a dedicated edit box.

[Chris]

I'm afraid I can't really make sense of your last comment. Ahola is "edit-in-place", as are all WYSIWYG editors. The Aholda edit box is just a div and the toolbar is another div, these could be the only things on the page. The Ahola solution meets your requirements for 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." Please can you explain more clearly why this is not a solution you will consider.

[a coder]

If you need more examples of what I am looking for, see ckeditor.com/demo or tinymce.com/tryit/full.php --- these are HTML editors and have about 80% more of the formatting features needed, but you can see that both show an edit box without having to Click to make it appear.

[a coder]

I am not working with technically savvy people. They are not going to like having to go to a dedicated edit page (where ckEditor currently appears) and have to click a box of text in order to invoke the actual editor window. The edit window must show by default (as it does now) without having to click to make it appear. This is an extra, unnecessary step.

[Pol]

Markdown replaces all these WYSIWYG editors by itself. Why would you need to output markdown?

[Dan Abramov]

@Pol: Because it is safe to store and display later, as opposed to HTML?

[user48545]

I have the same problem. Did you find a solution?

[Marc]

Regarding the CKEditor producing BBCode. I guess you can convert BBCode to Markdown but that would seem counter productive because some users may actually want to enter Markdown bc of the power it offers. I also saw a comment by a CKEditor developer lamenting the fact that Markdown doesn't have a specification and that making it useless to create a markdown filter I'm also curious about the impact of copy pasting from Word on the resulting code

[mb21]

I'm not getting this question either. Either you use Markdown to generate HTML or you use a WYSIWYG editor to generate HTML. Why would you want to use a WYSIWYG editor to generate Markdown? If that's really what you want, you can always use CKeditor and transform the HTML to Markdown.

[a coder]

The pen demo is edit-in-place, not what the OP (me) was/is interested in. No time to install right this second. Is there a traditional text box option?

[Dan Abramov]

@Acoder: My bad! I didn't realize you wanted a fixed toolbar. What's wrong with Halo though? It does have a toolbar now..

[a coder]

I personally don't like that the toolbar is separated from the edit box. CKEditor has this down to a science. If they would only give an option to output markdown I'd have exactly what I need (and what my clients are used to working with)

[Dan Abramov]

@WaleryStrauch The toggle is on the left of the demo page.

[Dan Abramov]

@WaleryStrauch I'm not sure what you mean. Does this screenshot help?

[Walery Strauch]

This is still css layout in this screenshot. I would like to grab markdown data (take a look on my screenshot i.imgur.com/fM4jFl2.png)

[Dan Abramov]

@WaleryStrauch Wow, I was being really stupid. I didn't realize it's not really the output. Sorry for wasting your time! I'll update the answer.

[Notre]

..it now seems to have at least beta support for outputting Markdown.

[Jared White]

Wow, thanks for sharing that -- this is EXACTLY what I was looking for. Awesome!

[gaborous]

@pjz Yes indeed, experimental export as Markdown seems to be possible now.

[a coder]

The source code for this one shows HTML not markdown.

[user764754]

"Does this exact thing?" According to the commonents of the add-on ckeditor still outputs HTML and not Markdown with this add-on.

[Melvin]

Thanks HNL, same here.

[a coder]

It's not true WYSIWYG though. It mixes the markdown into the editor window. What is sought in this question is an editor that shows both finished view and source in separate views (with a 'source' button on the toolbar, for fidgeting).

[Jameson]

Hey @starfry, I tried to reproduce what you describe above using your wysiwyg.js, but did not meet any great successes. Wondering if you have an accompanying HTML stashed in a gist somewhere as well? Stable version list of the dependencies, etc.? Thanks!

[starfry]

@Jameson I have added some notes to my gist. I hope they help! Feel free to add comment to the gist if you have any questions.