Markdown editor with live formatting

Question

I want to create an online markdown editor that has limited wysiwyg formatting. If you're familiar with iA Writer, I'm trying to create an editor similar to their desktop version. For the most part it's just a simple text editor, but it does a few snazzy things that I'm trying to duplicate.

• Automatically underline/bolds thing in *italics*, **bold**, ***bold italics***
• Indents ">" blockquotes
• Outdents "#" headers and "-" lists so that the text is left aligned, much like on the old three hole punched line paper you could align the text to the red line and put list numbers to the left of it.

I have a few thoughts about how to go about implementing this but I've run into some concerns with each of them.

Editable iFrame

• How do I outdent text or apply a css class to it
• The formatting happens automatically, so how would I change the selection of the text, reformat it and then go back to the original selection location
• I hear that you can load another page into your editable iFrame to do more advanced features, but I'm not too familiar with that - any good resources?

Pure javavascript

• How do I create a blinking cursor in an area because I don't think I'll be able to do this in a input or textarea...
• Possibly make every line a div that converts into an input box when I click on it (similar to how the tags box works on the tags box when you ask a question (though doesn't work for inline formatting)

Any suggestions to how I might go about doing something like this?

Answer 1

A good start would be to look at Code Mirror (http://codemirror.net/) whom already provides Markdown Editor and a Strong API.

You should be able to add features and live rendering on top of it.