JQuery WMD Plugin

In a previous post I discussed hunting down and implementing the WMD Editor. Aside from a bug in chrome that I managed to resolve fairly quickly, the only issue I've come across is that it didn't play nice with AJAX. Much of its code seemed to load up when the page loads and no amount of function calls would get it to instantiate an editor on the fly.

Well now that has changed! I don't know why this wasn't at the VERY TOP of my Google results, but I found a JQuery plugin for WMD that is very up to date. The repository has commits as recent as 2010 and seems to have all the same updated code from the original WMD.js I was working with. I modified it a little bit to include some Code Tunnel HTML formatting (for the semi-transparent backgrounds of elements) and viola! Now all I have to do to drop in a WMD Editor is add a class="wmd" to my textarea that I want to be my editor, and then do this:


Yep, that's it. I only define the <textarea> on the page and the plugin does the rest. Which is perfect because if javascript is turned off then the preview panel and the button bar don't even get added to the page! Previously with JS turned off there would be empty <div> containers where those elements would go and they looked out of place.

The only issue I ran into was that jquery.wmd.js had a copy of showdown.js right inside the file and this showdown parser had an additional regular expression added to it that did not exist in the showdown.js file I was using before. This regex did not play nice with Chrome. It was designed to turn plain links into clickable links in the preview but Chrome gave a "Unassigned illegal access" exception when it encountered the links.

I actually ended up removing the showdown code from jquery.wmd.js and just referencing my old showdown.js file. Other than that regex the code was identical anyway. I just like them separated. So what does all of this mean? Well, click "Add Comment" down below and find out!


Read more posts by this author.

comments powered by Disqus