MarkItUp!

MarkItUp! is a JavaScript plugin built on the jQuery library that allows you to turn any textarea into a markup editor.

MarkItUp! is a different kind of editor. Instead of attempting a word-like WYSIWYG interface, markItUp simply adds tags to your markup inside the textarea. This way, 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.

Features

and unobtrusive integration - markItUp! is easy to integrate in existing or new projects, because it can turn any ordinary textarea field into a powerful quicktag editor with just 2 extra lines of code. The integration is unobtrusive, so your HTML will remain clean and semantic, and it degrades gracefully for users without JavaScript.
Support for keyboard shortcuts - markItUp! is easy to use. You can define your favorite keyboard shortcuts and use familiar keyboard combinations for a user-friendly experience and effective manipulation of text and selections.
Toolbar and drop down menus markItUp! allows you to set your buttons in a clear toolbar with convenient drop down menus.
Fully customizable and scriptable - You can add any markup and buttons you need with any styling you like. Callback functions allow for complex scripts and macros.
Editor's features callable from any place - You can trigger markItUp! features from anywhere in your page. You can quickly insert text or tags from other plugins or picture/media/link libraries.
Ajax dynamic preview - With the use of Ajax, you can let markItUp! render a live preview of your markups via any server-side parser you want. The preview can be opened in a new window or in a built-in iframe updated automagically, to reflect any changes in the editor.
Customizable Skins - Using CSS, you can skin the markItUp! editor to fit the look & feel of your application or website.

Licence: MIT/GPL. Tested on PC: IE6/7, Firefox 2, Opera 9+, Safari 3 and OSX: Safari, Opera 9+ and Firefox 2.

Download MarkItUp!

Demo | Home page | Documentation

Related categories:

Comments? Need help with a component? Use our forums for further discussions.

Posted on the 3rd of April at 12:49 pm

Component Categories

Recent jQuery

jQuery Categories

From the blog RSS

Design Inspiration: European Graphic Design from 1950-1970: 30th of May at 5:08 pm
Parsing Strings With jQuery: 28th of May at 12:21 pm
Modalpreview - Preview Your Comment in a Modal Window: 19th of May at 8:32 pm
Milestone 01 - 70+ High-End Components for Web Designers and Developers: 13th of May at 9:52 pm
Tripoli Beta: 8th of May at 7:08 pm
The Visual Active State: Popular Techniques and Examples: 2nd of May at 7:34 pm
Introducing the Lab: 29th of April at 1:58 pm
Useful jQuery: a Compilation of jQuery Utilities: 23rd of April at 7:49 pm

DevKick News RSS

24 Kick Ass Portfolio Designs: exactly.; 17th of June at 9:07 pm
Using CSS to Fix Anything: Noupe shares some quick tips on how to avoid easy pitfalls when creating your CSS layout.; 17th of June at 11:14 am
2008 Design Trends: So what's hot now' Pencil sketches, handwritten notes, card stocks, watercolor effects, collage art, script fonts, grungy and splatter ink backgrounds etc... Some nice visual examples.; 16th of June at 10:04 am
10 Video Tutorials for Learning Basic Web Design Skills: Some people can read instructions on how to do things and can immediately go out and do them without any problems. But others need to see things done before they fully grasp how to do them.; 16th of June at 10:03 am
UTF-8: The Secret of Character Encoding: Character encoding and character sets are not that difficult to understand, but so many people blithely stumble through the worlds of programming without knowing what to actually do about it.; 12th of June at 11:17 am
jQuery UI v1.5 Released: "When we first started with the UI project, we set out to build a generic, basic, and simple way of adding and extending core interaction to DOM elements. However, we soon found that our approach wasn't working for UI."; 10th of June at 9:55 pm
The PHP Benchmark: The PHP Benchmark was constructed as a way to open people's eyes to the fact that not every PHP code snippet will run at the same speed. You may be surprised at the results that this page generates.; 9th of June at 1:27 pm
Introduction to CSS3 - What is it?: This article marks the first of several, providing an introduction to the new CSS3 standard which is set to take over from CSS2.; 9th of June at 9:24 am
Planning a Semantic Web site: This article leads you through the aspects of both information architecture and general infrastructure you need in place to truly take advantage of this burgeoning opportunity.; 8th of June at 5:49 pm
Why we skip Photoshop: 7 reasons why the 37signals team skips photoshop.; 8th of June at 8:25 am