Using Whizzywig on web pages

Simplest example - cut and paste

What this does is to include the whizzywig javascript into your page (63 is the latest version number). The onload="whizzywig()"  in the body tag turns all the textareas on the page - just one in our example - into full Whizzywig editors. You can add more textareas and they will automatically become whizzywigs with this technique.

if you want to leave some textareas as they are then you can use the makeWhizzyWig function to handle one textarea at a time:

makeWhizzyWig("textarea_id");

If you uploaded whizzywig.js to a supporting directory, make sure you give the full path to the script src parameter.

If you can't see the buttons,  you need to upload icons.png to wherever you put the latest whizzywig.js.
It looks like this:

This graphic contains 
all the buttons needed for the whizzywig toolbar

See the Download page to grab the icons.png image.
(Note that older versions - 59 or earlier - of Whizzywig use WhizzywigToolbar.png - available from the download page.)

By default, Whizzywig shows all of its controls on the toolbar but you can tailor this. For example:

 whizzywig('bold italic image bullet link fullscreen')

would show just the buttons listed, in the order that you listed them, for all the textareas on the page.

For a single textarea you could use, for example:

 makeWhizzyWig('editarea','bold italic number table');

See Customizing Whizzywig for more on how to choose what buttons go on the toolbar and how to control fonts and styles in the edit area.

View source on the Whizzywig Demo pages for more working examples.The editor area takes the size specified for the textarea it replaces. It is better to do this with CSS; e.g. (style="width:100%; height:400px"), but it will make a stab at sizing from the rows and cols attributes. If the user may need more editing space then leave the "fullscreen" button enabled.

Javascript Libraries

The onload event is not generally compatible with Javascript libraries. If you use jQuery on your page you should use $(document).ready(whizzywig) rather than onload, or add the whizzywig() call to an existing .ready handler.

If you are using the Unverse javascript library then add the whizzywig call into the docReady function, for example:

function docReady(){whizzywig('bold italic bullet number table');}

Similarly MooTools users can use the domready event.