Pages

Friday, July 23, 2010

JavaScript WYSIWYG Editor – TinyEditor

JavaScript WYSIWYG Editor
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:
01new 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.

0 comments:

Seo | Web Design | Web Development | Link Building | Web Maintenance | CMS | Shopping Feeds | E-commerce | Corporate Identity | Web Application Solutions | Web Programming | Web Marketing | Flash Design | Brochure Design | Content Writing | Ultimate Solution | Content Identity | Support | Outsourcing | Portfolio | Testimonials | SEO Plans | SEO Packages | Internet Marketing Strategy | Site Optimization & Maintenance | PPC Management Services | Web Design Company Chennai | Privacy Policy | Term of Service | Copyright


Ultimate Creators is an innovative web design Company Chennai Specializing in Web Designing, Logo Branding,Search Engine Marketing, Search Engine Promotion and Search Engine Ranking Services

Ultimate creators is the height of creativity when it comes to web designing, logo branding with a touche of excellence added to your product you can be assured of the ultimate creation in the World Wide Web. If you wish to market yourself in the web you can opt for the seo package which provides you with the options of search engine marketing, search engine promotion and search engine ranking services. For ultimate creations look no further than ultimate creators