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 famfamfam 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:
new TINY.editor.edit('editor',{
id:'input', // (required) ID of the textarea
width:584, // (optional) width of the editor
height:175, // (optional) heightof the editor
cssclass:'te', // (optional) CSS class of the editor
controlclass:'tecontrol', // (optional) CSS class of the buttons
rowclass:'teheader', // (optional) CSS class of the button rows
dividerclass:'tedivider', // (optional) CSS class of the button diviers
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
footer:true, // (optional) show the footer
fonts:['Verdana','Arial','Georgia','Trebuchet MS'], // (optional) array of fonts to display
xhtml:true, // (optional) generate XHTML vs HTML
cssfile:'style.css', // (optional) attach an external CSS file to the editor
content:'starting content', // (optional) set the starting content else it will default to the textarea content
css:'body{background-color:#ccc}', // (optional) attach CSS to the editor
bodyid:'editor', // (optional) attach an ID to the editor body
footerclass:'tefooter', // (optional) CSS class of the footer
toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'}, // (optional) toggle to markup view options
resize:{cssclass:'resize'} // (optional) display options for the editor resize
});
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 browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.
Click here to download the source code.
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.
In the chrome has bug when click on the source.
ZeroZ on February 08, 2010 at 1:51 am