My favorites | Sign in
Project Home Downloads Issues Source
Project Information
Members
Featured
Downloads

Apply to a textarea to get a wysiwyg xhtml editor that delivers super clean xhtml

Version 1.3

Fixed to work correctly with jquery-ui 1.8, and below

Version 1.2

Final release for jquery-ui 1.7

Fixes and updates listed in issues tab

NB this version doesn't work with the changes implemented in jquery-ui 1.8

Version 1.1

Now using the $.widget framework in jquery-ui 1.7 Meaning it will work with the themes roller for jquery along side the other ui components

Fixes for compatability with ie, webkit and moz

jQuery-htmlClean now does formatting

now ~14K min'd if you want clean html you also need jquery-clean ~6K min'd

nb The featured download also includes the latest jquery-clean

example

Where you have a textarea like this...

    <textarea id="Input" rows="15" cols="80" class="html"></textarea>

Call htmlInput in a script block like this...

    // set as default for all htmlInputs
    $.ui.htmlInput.defaults.styleUrl = "content/editor.css";
    $("#Input").htmlInput();

    // set up the html input, set style url for this one only
    $("#Input").htmlInput({styleUrl: "content/editor.css"});

see the jquery.htmlInput.test.htm file in the featured download for a fuller example

1.1 Compatability Layer

The method used to create a htmlInput has been changed so that it works in the way that the jQuery-ui widget factory requires. This has the advantage of being able to create many htmlInputs at a time and in the way a jQuery ui developer would expect (see the example above). In v1.0 it was more like a function returning the htmlInput object. e.g.

    var myHtmlInput = new $.htmlInput("#Input");

While you are converting to the new way you can add the following to your main script to provide compatability with the older versions

    $.htmlInput = function(element, options){
        return $(element).htmlInput().data("htmlInput");
    };

Version 1.0

Requires

jQuery http://jquery.com
jQuery.htmlClean http://code.google.com/p/jquery-clean

This is a light weight (~12K min'd) script and does not contain support for all html entities (for example there's no table editing)

It does however have the following;

  • Bold
  • Italic
  • Superscript
  • Subscript
  • Headers
  • Preformatted text
  • Lists
  • Links
  • Images

You can switch on and off the features you want

Add your own stylesheet to the editor

You can have your own popups for Links and Images, the current popups are scripted windows which are a bit naff looking (probably add a better default at some time)

Powered by Google Project Hosting