Friday, March 28th, 2008
markItUp! - Lightweight Text Editor
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!:
-
-
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
-
<link rel="stylesheet" type="text/css" href="markitup/sets/html/style.css" />
-
-
-
<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>
-
-
-
<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
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!
Very sexy website, very sexy editor. If this provided inline syntax-highlighting it would be the ultimate online CMS editor. I’d rather having something like this (lightweight, no fluff) then FCKEdit or TinyMCE.
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.
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
Thanks.Good article