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

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

is a simple plain text formatting syntax. Markdown syntax can be translated into HTML in Drupal using an input filter with the 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. is an plain text editor with a customizable toolbar. By default BUEditor provides shortcut buttons for HTML.
  2. is an add-on for BUEditor that provides a set of Markdown buttons.
  3. That covers the WYM of our . For the WYS part, (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 JavaScript Markdown implementation by John Fraser (the end result of this combination of modules is actually very similar to Fraser's () ). Note that while Markdown filter and Markdown Editor for BUEditor support , Showdown and Markdown Preview only support original Markdown.

Check out the to see it in action.

Comments

Thank you thank you thank you for this post and your module. I've been alternating between(and struggling with) FCKEditor and TinyMCE for years but it looks like this combo + IMCE (for image uploading, etc) could be my go-to config. This is awesome!

Is it possible to add a link target like _blank, _parent, etc.?

@A. Marcanth:

No. Markdown assumes XHTML, and the target attribute is deprecated in XHTML.

Post new comment

The content of this field is kept private and will not be shown publicly.
(I add rel="nofollow" to the link, so hold the spam)
No HTML allowed. Please use syntax to format content.