Using Whizzywig on web pages
Simple example - cut and paste
The above example uses the default graphic buttons - you should upload WhizzywigToolbar.png to your root directory, or wherever you will use Whizzywig.
If you want text buttons add a line
buttonPath = "textbuttons";before makeWhizzyWig
View source on the demo pages for more working examples.
Explanation...
In the HEAD section of your page you need:
<script src="whizzywig.js" type="text/javascript"></script>
If you uploaded whizzywig.js to a supporting directory, make sure you give the full path to the script src parameter.
On supported browsers, Whizzywig will replace one textarea you choose
with a Whizzywig toolbar and edit area. The textarea must have an ID
attribute.
The editor area takes the size specified for the textarea it replaces. It is better to do this with inline CSS; e.g. (style="width:100%; height:400px"), but it will make a stab at sizing from the rows and cols attributes.
To start Whizzywig you need to issue a makeWhizzyWig call inside a script tag. The best place to do this is immediately following the textarea:
<textarea id="richtext">Any preset text to be edited goes inside the textarea</textarea>
<script type="text/javascript">
makeWhizzyWig("richtext", "bold italic link image");
</script>
The first parameter ("richtext" in the above example) is the ID of your textarea
The second parameter ("bold italic link" in the above example) is the order of buttons on toolbar. Specify "all", or leave the parametr off if you want the default set in the default order
If you want to use the default graphic buttons rather than text buttons, you need to put the WhizzywigToolbar image in your home directory:
Right click the above image and "Save as" to take a copy of it.
You can specify your own images for buttons and tell Whizzywig where to find them using the buttonPath variable.
The path must be in quotes and end in a '/', e.g.
buttonPath = "images/whizzywigbuttons/";Whizzywig will expect these to be .gif files (one per button): if you want another filetype set the
buttonExt variable, e.g.
buttonExt = ".png";These lines must come before
makeWhizzyWig.There's an alternative set of buttons in the buttons.zip file on the download page.
See Customizing Whizzywig for more on how to choose what buttons go on the toolbar.