A Markdown WYSIWYM solution for Drupal (or: Markdown for clients that don't sport neck beards)

27 Jan 2009

UPDATE: This project was removed from drupal.org because the security team had concerns about using a client-side markdown parser. I didn't share those concerns (nor, apparently, do GitHub and StackExchange who are both using Showdown.js), but whatever, the Dude abides.

WYSIWYG editors like FCKeditor and TinyMCE are popular, but in some ways they do more harm than good.

They generate lots of unnecessary HTML

You may think to yourself "Sure, but I'll just filter that stuff out using an input filter". While that will clean up your output somewhat, that unholy mess will still get saved in your database and can cause problems down the line if you want to repurpose your content. Also, if you display the content in teaser form somewhere on your site filtering is necessary since Drupal could potentially insert a teaser break before a closing </div> generated by the WYSIWYG causing your layout to fall apart.

Pasting from MS Word makes for awful results

Pasting content from Word often generates atrocious results even when using the "Paste from Word" functions. A good example is bullet lists which both FCKeditor and TinyMCE turn into a series of lines preceded by &bull; entities instead of a proper HTML unordered list. This is obviously very unfortunate since it often looks identical to a properly formatted list in the browser. Many people like to do their writing in Word and it's hard to convince a client to paste the stuff into Windows Notepad as an extra step just to remove cruft that they can't even see, not to mention making your implementation seem very primitive.

An easier Markdown

Markdown is a simple plain text formatting syntax. Markdown syntax can be translated into HTML in Drupal using an input filter with the Markdown filter module. This means less clutter in your database compared to pure HTML and an easier syntax to learn for end-users. It also means that the user is encouraged to focus on semantic rather than aesthetic qualities when formatting the text.

While Markdown is simple compared to HTML, you still need to learn a the syntax which can make it a hard sell when building a site for a non-technical client.

We can alleviate this using a combination of modules:

  1. BUEditor is an plain text editor with a customizable toolbar. By default BUEditor provides shortcut buttons for HTML.
  2. Markdown Editor for BUEditor is an add-on for BUEditor that provides a set of Markdown buttons.
  3. That covers the WYM of our WYSIWYM. For the WYS part, Markdown Preview (by yours truly) inserts a pane below the textarea field that displays a live preview of the HTML output as you type. This is accomplished using the Showdown JavaScript Markdown implementation by John Fraser (the end result of this combination of modules is actually very similar to Fraser's (possibly abandoned) WMD editor). Note that while Markdown filter and Markdown Editor for BUEditor support Markdown Extra, Showdown and Markdown Preview only support original Markdown.

Check out the demo to see it in action.