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] ...
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.
- Download the WMD Editor
- Extract the contents of the downloaded zip file to a publicly accessible folder on your web server.
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.
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:
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