Making a basic SO-like WYSIWYG editor in Rails

Question

I am relatively new to Rails, having recently completed Hartl's Rails Tutorial, and am now embarking on my first full fledged project. What I am interested in adding to my web app is something similar to the text input feature in SO, where you could type, and see directly how your text will turn out. After some digging around on SO, I have decided on using the gem bluecloth, which is Markdown implemented in Ruby, but now have the following questions:

1. I am unsure about how to tie what bluecloth outputs to the form_for helper. My understanding was that you could convert to strings via the function html = BlueCloth.new(str).to_html(), but I am unsure what to do when you have a text field as part of form_for, where I should plug in the bluecloth part? In other words, I am still a bit confused about the magic of typing in one box and seeing the item show elsewhere on the page.
2. Are the WMD bar button items and functions included Markdown editors (such as bluecloth), or would this be something I have to build manually? If so, how would I get something like the bold button to show "** **" in the editor as you type?

Thanks for your help!

Answer 1

As comments have noted, Markdown is a markup language like HTML, so its not easy to do WYSIWYG.

There are probably two approaches to getting this kind of functionality.

Server side

Post your markdown text to a server and get the server to return HTML. I've done this a lot in Python, but for Ruby this SO answer suggests maruku. The disadvantage of this approach is that it requires a server request every time you want to view the preview, and then some way to integrate that back into your UI without disrupting the user. Stackoverflow uses this approach with the WMD editor and some C# on the server.

Client side

Another option is to use a client side library to take your markdown "code" and generate html which you can then integrate into your page using javascript. An example of this is dillinger. This uses a textarea and something like showdown to render the HTML in the browser. I'm taking this approach one step further in a WYSIWYG Markdown editor I'm developing called demarcate.js

Or... ditch Markdown

The comments have already suggested alternative WYSIWYG editors... most of these are not markdown editors but rich text editors which produce HTML at the end. TinyMCE and wysihtml5 are good options and I've also used CKeditor before with some success - it has a cool "in-place" feature in the latest version which inspired my Markdown editor above.