Friday, March 28th, 2008

markItUp! – Lightweight Text Editor

Category: Ajax, jQuery

When 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!:

[CSS] [/CSS]


  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="markitup/jquery.markitup.js"></script>
  3. <script type="text/javascript" src="markitup/sets/html/set.js"></script>
  5. <script language="javascript">
  6. $(document).ready(function()    {
  7.     $('#html').markItUp(myHtmlSettings);
  8. });
  9. </script>
  1. <textarea id="html" cols="80" rows="20">
  2.     ...html stuff...
  3. </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

Posted by Rey Bango at 6:00 am

4.3 rating from 98 votes


Comments feed TrackBack URI

Brilliant app!
a great use of jQuery, and also, as a web developer,
I’m really impressed with their website code, and whole design.

Excellent work!

Comment by vsync — March 28, 2008

Since I will be using JQuery in our app, this lines up with my goal really nicely. Very sweet, I might very well include this in our next release.

Comment by Liming — March 28, 2008

Its great. I like the approach.
After playing around a little, it sure is a candidate to integrate for our next release of our CMS.
Since there is a lot of use of customized DOM Javascript action focused on the content textarea, the switch of the ID* makes me hesitate a bit because it would causes a lot of refactoring in all custom libs. Many functions relay on the ID selection.

Am i miss something? Or is there a way to prevent the ID switch?

*) markItUp rips off the id from the textarea and uses it on the surrounding container

Comment by felic — April 2, 2008

Thats brillant

Comment by Tribulus — September 22, 2008

Leave a comment

You must be logged in to post a comment.