JavaScript WYSIWYG Editor – TinyEditor

TinyEditor is a simple JavaScript WYSIWYG editor that is both lightweight (8KB) and standalone. It can easily be customized to integrate with any website through CSS and the multitude of parameters. It handles most of the basic formatting needs and has some functionality built in to help keep the rendered markup as clean as possible. The icons are courtesy of  and have been combined into a sprite so there are only a few HTTP requests for the editor. I plan on adding some updates in the future to support font color, a full-screen mode, and a paste from Word option.
To initialize the script use the following:

01	new TINY.editor.edit('editor',{

02	id:'input', // (required) ID of the textarea

03	width:584, // (optional) width of the editor

04	height:175, // (optional) heightof the editor

05	cssclass:'te', // (optional) CSS class of the editor

06	controlclass:'tecontrol', // (optional) CSS class of the buttons

07	rowclass:'teheader', // (optional) CSS class of the button rows

08	dividerclass:'tedivider', // (optional) CSS class of the button diviers

09

controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'], // (required) options you want available, a '|' represents a divider and an 'n' represents a new row

10	footer:true, // (optional) show the footer

11	fonts:['Verdana','Arial','Georgia','Trebuchet MS'],  // (optional) array of fonts to display

12	xhtml:true, // (optional) generate XHTML vs HTML

13	cssfile:'style.css', // (optional) attach an external CSS file to the editor

14	content:'starting content', // (optional) set the starting content else it will default to the textarea content

15	css:'body{background-color:#ccc}', // (optional) attach CSS to the editor

16	bodyid:'editor', // (optional) attach an ID to the editor body

17	footerclass:'tefooter', // (optional) CSS class of the footer

18	toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'}, // (optional) toggle to markup view options

19	resize:{cssclass:'resize'} // (optional) display options for the editor resize

20

});

The first parameter taken by TINY.editor.edit is the variable name used for the object instance. Keep in mind that before posting you will need to call the instance.post() function to ensure that the latest changes in the WYSIWYG translate into the text area. This script has been tested in all major
1/8/2010 – Resolved a couple IE and Chrome issues and added some cleanup for Safari/Chrome. Thanks for the reports.
1/12/2010 – Resolved issue with conversion to lower case and the header row class.