For quite a while I've been looking for a simple web-based text editor for use with general web forms (comments, contact etc.) and a CMS I'm currently working on. There are a few good full-featured editors out there: CKEditor.com, freerichtexteditor.com to name a couple, but I was not able to find a simple, light-weight editor. Then I stumbled upon Markdown.

What is Markdown?

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML). - daringfireball.net

So what does that mean? Basically, using the Markdown syntax, users with little or no HTML knowledge can make text bold, italic, insert links and lots more. Behind the scenes it looks like this:

   ... **bold**, *italic*, insert [links][5] ...

Confused? It's not as bad as it sounds. Using a markdown editor, such as WMD Editor, allows for easy creating and editing, no need to even remember the syntax! WMD Editor has the typical buttons for bold, italic, links and images, so formatting text is simple. It's an excellent light-weight option, comprised of only 4 javascript files.

So how do I use it on my site?

Here's all you need to know to get up and running with a markdown text editor on your site.

1. Download the WMD Editor
2. Extract the contents of the downloaded zip file to a publicly accessible folder on your web server.

3. Include the javascript file before the ending body tag (</body>) on the page you would like the editor to appear on:

   <script type="text/javascript" src="wmd/wmd.js"></script>

That's it! WMD Editor will automatically turn the first <textarea> tag into the editor. Submitting the form turns the text in that textarea into valid XHTML.

Even More!

Want to use the WMD Editor with your Wordpress Blog? No problem, check out PHP Markdown. Excellent instructions are provided on the PHP Markdown site for integrating it with Wordpress. What about integration with CodeIgniter? Simple! Grab the PHP Markdown file (link above), extract it to the 'helpers' folder in your CodeIgniter installation and rename it to 'markdown_helper.php'. Then load the helper:

$this->load->helper('markdown');

and run your text through the function before displaying it:

$myHTML = Markdown($myText);

So there you have it, a quick introduction to text formatting/editing using Markdown and the WMD Editor. To see it in action, check out the demo page on wmd-editor.com

Further Resources

• daringfireball.net
  The project page and everything you wanted to know about Markdown.
• WMD Editor
  The WMD Markdown editor web site.
• PHP Markdown
  A PHP implementation of the Markdown markup language.
• MarkItUp!
  An excellent Markdown editor built on the jQuery library.