MarkdownDeep Editor Improvements

Thursday, January 27th, 2011     #markdowndeep #everything

New improved jQuery API makes integrating MarkdownDeep's client side editor easy.

I've been using MarkdownDeep in a number of projects now (Showcase Lane and Jab) and have found a couple of pain points that I keep hitting on. So today I put up a new version that addresses some of these issues.

  1. Fixed the enter key handling in FireFox and at the end of the document
  2. Added a new option disableTabHandling to prevent the editor from stealing the tab key.
  3. Much improved jQuery API.

Previously, the jQuery support for MarkdownDeep was all automatic - it simply looked for any textareas with an mdd_editor css class and turned them into markdown editors. That sounds good but if you wanted to change editor options it got a bit messy.

So it now supports a more typical jQuery API, something like this:

 $("textarea.mdd_editor").MarkdownDeep({ 
    help_location: "/Content/mdd_help.html",
    disableTabHandling:true
 });

Options for the markdown transformation, the editor and the plugin can all be passed in a single array of options. (A full list of available options is here).

One of the problems I've faced with the client side editor is a nice way to insert the toolbar and resize bar without the page jumping around on page load (when the plugin is typically invoked). In the previous version, you had to insert some script that wrote out the appropriate HTML:

<script type="text/javascript">MarkdownDeepEditorUI.RenderToolbar("/Content/mdd_help.htm")</script>
<textarea class="mdd_editor"></textarea>
<script type="text/javascript">MarkdownDeepEditorUI.RenderResizeBar()</script>

It worked, but it was horrible. So the new version will automatically create the toolbar and resize bar divs if they're missing, meaning this will work.

<textarea class="mdd_editor"><textarea>

But, it will cause the editor to "jump" down on page load - which I find really annoying.

So before creating those divs, it checks if they're already there and simply populates them. By having appropriate height attributes on the surrounding divs, the jump can be avoided. eg:

<div class="mdd_toolbar"></div>
<textarea class="mdd_editor">markdown content here</textarea>
<div class="mdd_resizer"></div>

I've also improved the ability to specify which div the preview HTML is rendered to.

  1. it looks for an attribute on the text area 'data-mdd-preview'. If found, it uses it as a jQuery selector to locate a the preview div.
  2. if the data attribute is not found it uses '.mdd_preview' - ie: it looks for any class with mdd_preview class
  3. if no preview div found by the above selector it creates one immediately after the resize bar

All in all, I'm quite happy with these improvements as they make the client side API both cleaner and more flexible.

(If you're using the previous version the new version is not backwards compatible - I just couldn't justify the effort).

« Older - Jab - Article Categories Newer - Microsoft Embraces Facebook? »