Dynatable & Tinny Editor

Dyna Table


HTML5+JSON interactive table plugin.

Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it’s not just for tables.



Tinny Editor

JavaScript WYSIWYG Editor – TinyEditor

Javascript 435 Comments

JavaScript WYSIWYG Editor

TinyEditor is a simple JavaScript WYSIWYG editor that is both lightweight (under 9KB) 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:

1 new TINY.editor.edit('editor',{
2     id:'input', // (required) ID of the textarea
3     width:584, // (optional) width of the editor
4     height:175, // (optional) heightof the editor
5     cssclass:'te', // (optional) CSS class of the editor
6     controlclass:'tecontrol', // (optional) CSS class of the buttons
7     rowclass:'teheader', // (optional) CSS class of the button rows
8     dividerclass:'tedivider', // (optional) CSS class of the button diviers
9     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', '|', '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 browsers and is available free of charge for both personal or commercial projects under the creative commons license.

Click here for the demo.

Click to downloadDownloaded 57216 Times


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s