Using Whizzywig 2011 is meant to be as simple and lightweight as possible. You don't even need to upload anything to your website, just insert one line anywhere in your HTML: 

<script src="whizzywig2011.js"></script>

Any element (normally a textarea but can be other elements) that has a class of "WYSIWYG" will be turned into a Whizzywig edit area.

You can also turn a textarea into an editor - and back again - dynamically with Javascript:

  1. You can turn a textarea into an editor, regardless of it's classname, by calling _.wys(TA) where TA is the textarea, or its "id".
  2. You can revert an editor back to the original textarea by calling _.unwys(TA) changes made in the editor will becopied back to the textarea.

Keyboard controls 

  • CTRL+B - Bold selected text 
  • CTRL+I - Italic selected text 
  • CTRL+U - Underline selected text 
  • CTRL+H - Edit the HTML source 
  • CTRL+L - Insert a Link 
  • CTRL+M - Insert an iMage 
  • CTRL+Space - Clear all inline styles and classes
Note that the cursor must be in the edit area for the above to work, or you'll get the browser default action (History, Bookmarks, etc.) 

Double-click 

  •  a link - bring up the Link dialogue 
  •  an image - bring up the Image dialogue 
  •  the toolbar - toggle full window: makes the editor fill the current browser window, or restores it down

Toolbar

To hide or change the order of the controls on the toolbar, you can do it one of two ways:

  1. Using the title attribute of the element, e.g.
    title="bold italic bullet number image link text"

  2. Setting the variable 'wz_toolbar' in javascript, which will set the toolbar for all Whizzywigs on the page

The default commands you can use in the title attribute, or define once for all editors on a page with "wz_toolbar=", are: 

'block text left center right insert link image table source'

If you don't explicitly  set any toolbar controls you will get all of these except  'source'.

This set, in this order, can be defined by just 'default'. You can then add others: 'default source' would be a common requirement.
Or if you prefer, 'source default' to make the source button the first one.

You can also exclude items from the default by prefixing them with a '-'.
So: 

 'default -table -insert' 

excludes the table and insert controls from the default set and is equivalent to

 'block text left center right link image'

In the current Whizzywig 2011 you can additionally use any of   'bold', 'italic', 'bullet', or 'number' but this may be confusing if used in conjunction with 'block' and 'text', so this will not be part of the new core. 

To add your own items to the toolbar

You can add any control of your own devising - see the second example at this Whizzywig 2011 demo and view the source. You will need to define the action using _.control. For example 'red' is defined as 

_.control['red']=_.btn('Red','<font color=red>','<b style=\"color:red\">A</b>'); //code for "Red" button

Note that this example appears to insert a deprecated <font> tag but the clean up code will change that into CSS.If a control is included in the list but there is no _.control defined for it, then it just isn't shown. 

Changing the look

You can use CSS to style the whizzywig edit area and the toolbar. To override the default styles, make sure you place your stylesheet after the whizzywig script tag.

Styling the edit area

Normally the content in the whizzywig inherits the CSS styles of the rest of the page, but you can override this by setting explicit styles for the class wz_rte, for example: 

.wz_rte {background-color:white}

Styling the toolbar

All toolbars have a class of wz_formatbar - you can style this in your CSS stylesheet, for example:

.wz_formatbar {background-color:silver}
.wz_formatbar button {background-color:pink}

Changing the toolbar icons

To keep the overall footprint small and make the editor even simpler to install, the default toolbar does not include any images. Even the icons that look like images aren't really images. But you can use images or your own text if you prefer. Simply set _.bt.controlname to the HTML you require. For example:

//Button pictures

_.bt.right='<img src="http://unverse.net/silkbtn/control_end_blue.png">';
_.bt.left='<img src="http://unverse.net/silkbtn/control_start_blue.png">';
_.bt.center='<img src="http://unverse.net/silkbtn/control_pause_blue.png">';
_.bt.image='<img src="http://unverse.net/silkbtn/image.png">';
_.bt.link='<img src="http://unverse.net/silkbtn/link.png">';
_.bt.insert='<img src="http://unverse.net/silkbtn/html_add.png">';
_.bt.table='<img src="http://unverse.net/silkbtn/table.png">';
_.bt.source='<img src="http://unverse.net/silkbtn/page_code.png">';

()

See the image button demo.