markItUp! - Lightweight Text Editor
Date : 2008 03 28 Category : Tech & Development
AjaxianWhen Jay Salvat set out to build markItUp!, he wasn't trying to build the next FCKEditor or TinyMCE. He just wanted to build a simple editor that could allow developers to add enhanced markup capability to textarea elements.
markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented. markItUp! is not meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer's needs in their CMSes, blogs, forums or websites. markItUp! is not a WYSIWYG editor, and it never will be.
The usage is very straightforward. The following code demonstrates the ease of using markItUp!:
PLAIN TEXT CSS:<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" /> <link rel="stylesheet" type="text/css" href="markitup/sets/html/style.css" /> PLAIN TEXT JAVASCRIPT:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="markitup/jquery.markitup.js"></script> <script type="text/javascript" src="markitup/sets/html/set.js"></script> <script language="javascript"> $(document).ready(function() { $('#html').markItUp(myHtmlSettings); }); </script> PLAIN TEXT HTML:
<textarea id="html" cols="80" rows="20"> ...html stuff... </textarea>
The code generates a very intuitive markup editor as demonstrated below:
The script also provides several different options for the editor which adjust the style of editing. You can see those on the examples page.
The main highlights of markItUp! include:
Fast and unobtrusive integration Support for keyboard shortcuts Toolbar and drop down menus Fully customizable and scriptable Editor's features callable from any place Ajax dynamic preview Customizable Skins Tested on PC: IE6/7, Firefox 2, Opera 9+, Safari 3 Tested on OSX: Safari, Opera 9+ and Firefox 2 License: MIT/GPL Packed naked engine is about 5.5 kb