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:
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.