Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

A Lightweight Rich Text Editor in jQuery

Posted by Don Albrecht

jQuery RTE

As excellent as Xinha, YUI RTE, Tiny MCE, FCK & the other heavyweight Rich Text Widgets are, they can be massive overkill for many projects Weighing in at only 7k (uncompressed). This jQuery Editor is an incredibly light weight and responsive alternative to the big guns for most projects.

Features:

  • Stylesheet based formatting
  • Image support
  • Link Support
  • Strong, emphasis
  • Bulleted list
  • Source view

Supported Browsers

  • IE6+
  • Safari 3+
  • Firefox
  • Opera

Check it out online here:

http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html


12 Comments

  • link support doesn’t work with IE & FF :(

  • It worked for me in both IE 7 & FF 2 on Mac & PC.
    It does use a pop-up however. Could a blocker be causing problems for you?

  • Looks great! Just getting into jQuery and been looking for something lightweight like this.

    Does it work with plugins like jEditable or any other editInPlace plugin?

  • Not very well in my experience. I’ve been trying to get an edit in place plugin to work with an RTE for some time. There are numerous issues that spring up. Especially related to the way they use iframes and dom creation.

  • Hi,
    It is very usful and light wait.
    Anyone know how retrieve data from the rich text.I want to save the data to my DB.I can get the data document.getElementById.

    please help me ,

    Thanks ,
    VKS

  • [...] ago2 votesAn Architectural Bestiary, from High Tide Press>> saved by kendrickho 30 days ago5 votesA Lightweight Rich Text Editor in jQuery " By Don Albrecht " article…>> saved by cyrilsouben 36 days ago5 votesBestiary Images & Copyright>> saved by tedlaszuk 36 [...]

  • [...] A Lightweight Rich Text Editor in jQuery » By Don Albrecht » article » Ajax Bestiary (tags: jquery editor javascript wysiwyg) [...]

  • i got a question,after wrote the content,then submit,how to get the value,anyone did what I said,pls help me,my email is matikak@gmail.com

  • @vks
    The Iframe content are automatically inserted into the textarea when you submit the form.
    If you need them through javascript:

    //iframe is a global variable inside the rte and represents the
    // object
    var content = $(iframe).contents().find(“body”).html();

  • hmm elegant and good..

  • is there anyway to add underline funcitonality in this editor.
    i need that functionality also.
    Thanks..

  • The formatting is done with document.execCommand so adding

    $(‘.underline’, tb).click(function(){ formatText(iframe, ‘underline’);return false; });

    ought to work. (You’ll need too add a button as well)