CODEWITHSUNDEEP
user-controlsmarkdown
user60456
user60456

Reputation:

Live preview markdown editor

Forgive me if this is has been answered. I have looked around, but didn't find anything.

I am creating a site for non-techies and it requires them to be able to add rich text content. I have been looking at Markdown for this, and would like to use that.

I have been searching around for a nice (jquery) ui control to make editing simple, but everything I have looked at has the live preview living somewhere else on the page other than the input box. (WMD is like this, markitup, etc..)

I would like to use something that makes it feel like you are using a word processor. Like how TinyMCe does it, but running on Markdown, not HTML

Is there anything like that, or maybe somewhere that shows how to build it?

To clarify, I'm looking for an editor that makes it feel like you are typing in the live preview; not a textbox with a preview above/below.

Upvotes: 17

Views: 4053

Answers (4)

lizasperling
lizasperling

Reputation: 36

Check out Stack Edit It's a great WYSIWYG markdown editor - syncs with Google Docs, Dropbox & CouchDB, publishes to Github (and many other places), and offers easy link sharing. You can access it on their website or using the Chrome app. You can create titles and lists in the editor there, and it will show you the corresponding text in markdown format. You can then save, publish, share, or download the file.

Upvotes: 0

user60456
user60456

Reputation:

I have since found something that I love. the Pen editor on Github does just what I wanted. I am glad to see someone has taken this on

Upvotes: 0

fncomp
fncomp

Reputation: 6188

If I get what you're looking for, then the simplest approach would be to generate HTML with TinyMCE or CKEditor, then apply something like Markdownify to the output of e.g., tinymce.getContent().

Upvotes: 5

Joe White
Joe White

Reputation: 97718

Markdown would not be compatible with a WYSIWYG editor. Consider this sample Markdown:

Let's link to [Google][].

  [Google]: http://www.google.com/

If you were making a WYSIWYG editor, what would happen after you typed [Google]? Would you see blue underlined text? Would you just see [Google] since it's not a valid hyperlink yet? What about after you type the trailing []? It's still not a fully-defined hyperlink; you can't click it, because Markdown doesn't know where it links.

And how does the user type that [Google]: http://www.google.com/ follow-up line? That line isn't displayed; it's markup; it's invisible. Where do you type invisible text into a WYSIWYG editor?

Upvotes: -4

Related Questions