Using Whizzywig on web pages
Simple example - cut and paste
The above example uses graphic buttons - if you want text buttons you take out the line
buttonPath = "buttons/";
View source on the demo pages for more working examples.
Explain...
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.
If you try and use Whizzywig on more than one textarea on the same page, it will only format the last one.
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");
</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
If you want to use the graphic buttons instead of text buttons, set the buttonPath to the directory where you uploaded the button images (or created your own). The path must be in quotes and end in a '/', e.g.
buttonPath = "images/whizzywigbuttons/";This line must come before
makeWhizzyWig.See Customizing Whizzywig for how to choose what buttons go on the toolbar.