Using Whizzywig on web pages

Simplest example - cut and paste

What this does is to include the whizzywig javascript into your page (61 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:


Calls to makeWhizzyWig need to appear after the textarea in the HTML.

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.

Access from Javascript

If you are simply sending the editor back to the server when the form is submitted then the above is all you need - don't read any further!
Advanced users may want to access the content of a whizzywig from javascript before the form is submitted -  for example, you are sending back the contents using Ajax, or you want to validate or change what the user has entered. Before you can read the contents of the textarea from Javascript you need to call


which will copy the latest state of the editor back into the original textarea(s). Whizzywig automatically does this for you when the user submits the form.

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.