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 uploaded whizzywig.js to a supporting directory, make sure you
give the full path to the script src parameter.
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.
See Customizing Whizzywig for more on how to choose what buttons go on the toolbar.
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');}
