Finding and Implementing the WMD Editor

The Question:

http://stackoverflow.com/questions/5400015/how-do-you-implement-a-code-button-to-format-text-in-a-textarea

The Answer:

CodeTunnel.com uses MarkdownSharp to format text for comments and blog posts on the server. I started using this after falling in nerdy love with StackOverflow.com's question editor. Markdown is great but I wanted to simulate a lot of the functionality of their editor. The text preview below the edit box and the code button in the editor toolbar. Surprisingly it proved to be very difficult to find the source of the editor on Stack Overflow.

After searching a while I did find a blog that references the fact that they had to reverse engineer the original editor. That's unfortunate but various other sources confirmed that the reverse engineering had been done by now. Finding this reverse engineered editor was the hard part. For some reason Google did not come close to finding it on any of the related search terms. There is a github repository that hasn't had a commit since 2008 and a google code repository that has no source files in it's source control and only one link in the downloads section. That link goes to a site (wmd-editor.com) that apparently no longer exists. I found many, MANY references to wmd-editor.com and it is unfortunate that it is gone. This was becoming frustrating to say the least.

Finally, after a few hours, I stumbled on another google code repository containing all the relevant source and has commits as recent as November 2010 (woo hoo!). I downloaded the source and was disappointed to find a perl file in the repository. Fortunately that was just there as a reference and the editor is all client-side code, allowing you to convert the markdown on the server-side if you wish. There is an option to allow the WMD Editor to convert the textarea contents to HTML before the form is submitted in case you don't want to do the markdown conversion on the server side.

Now that that's done I have the full WMD Editor installed on CodeTunnel. Unfortunately it doesn't play nice with AJAX loaded forms and since the comment section on CodeTunnel is loaded via AJAX when javascript is enabled I can't add the editor to the comment box. However, note that markdown format still works in comments, you just don't get the fancy client-side editor. I will do some more playing around and see if I can make it work, but for now I'm just happy to have some slightly more advanced code editing abilities when I create new blog posts.

UPDATE

The previously mentioned problems with the editor not playing nice with ajax and not being available in the comments section has been overcome through the use of a jQuery WMD editor plugin that I discovered.

See http://codetunnel.io/jquery-wmd-plugin/ for the JQuery plugin of the WMD Editor.