Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Integrated Markdown WYSIWYG text editor

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:

enter image description here

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:

markdown WYSIWYG

markdown source


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

like image 396
a coder Avatar asked Oct 11 '12 13:10

a coder


People also ask

What is a WYSIWYG Markdown editor?

WYSIWYG (What You See is What You Get) editor. Markdown editor lets writers use Markdown syntax and HTML to customize articles. WYSIWYG editor uses Rich Text formatting and includes an extensive formatting toolbar, however you cannot use custom code in articles.

What is WYSIWYG text editor?

WYSIWYG is an acronym for “What You See Is What You Get”. In website editing, WYSIWYG means that you see on the display the precise appearance of your web page with the changes you have made. For word processing editors WYSIWYG represents the final pagination with the fonts' appearance and line breaks.

Is Markdown a WYSIWYG?

Markdown uses a simple formatting syntax to do the same thing as HTML or a WYSIWYG tool. The difference is that it's simpler than HTML, and you don't have to worry about opening and closing tags or dealing with menus. To format text, you use punctuation and characters you're already familiar with.

Is there a WYSIWYG HTML editor?

There are many WYSIWYG HTML editors with a variety of features and capabilities. You can choose a website builder, a CMS that includes a WYSIWIG editor, or an external editor. This range of choices can make it hard to pick the best solution for your business.


1 Answers

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.

enter image description here

like image 89
HNL Avatar answered Sep 21 '22 07:09

HNL