Customizing Whizzywig

Use your browser menu to "View Source" on the demo pages to see example configurations.

Controls on the toolbar

The toolbar is configured using the second parameter to makeWhizzywig.
"all" gives all the controls and is equivalent to specifying:

"formatblock fontname fontsize newline bold italic underline | left center right | number bullet indent outdent | undo redo | color hilite rule | link image table | clean html spellcheck"

You can choose any subset of this list, specified in any order to create your own toolbar.
Spaces separate each of the entries in the list.

  • "formatblock" creates the pull down for specifiying heading or paragraph style.
  • "newline" specifies a line break on the toolbar.
  • "|" specifies a separator between buttons.
  • "clean" is used to remove font tags and unwanted formatting added after a paste in from Microsoft Word or other office products.
  • "html" allows the user to edit the HTML source of the text in the edit area.

JavaScript variables

Additional parameters can optionally be specified in JavaScript. Examples:
buttonPath = "/btn/"; //path to toolbar button images; "textbuttons" (the default) means don't use images
cssFile = "stylesheet.css"; //url of CSS stylesheet to attach to edit area
imageBrowse = "whizzypic.php"; //path to page for image browser (see below)
linkBrowse = "picklink.php"; //path to page for link browser (see below)
gentleClean = false; //turns the cleanup routine vicious: deletes spans, inline styles and classes. Default is 'true'

Leaving any of these unspecified is harmless. You can add these lines in a script in the head section of your HTML, or just before the makeWhizzywig call.

Image browser, Link browser

You can use the Javascript variables described above to specify a pop-up browser for images, or for links.
An example of each is provided here - see the demo with link and image browsers.
If you want to use these you need to ensure your website supports PHP and copy the source:

  • Whizzypic Image browser: whizzypic.php - save as a .php and upload to your website
  • Whizzylink link browser: whizzylink.php - save as a .php and upload to your website
If you want to write your own browser, it needs to return the chosen URL to whizzywig using a line of javascript like this:
  • window.opener.document.getElementById('lf_url').value = url; (for links)
  • window.opener.document.getElementById('if_url').value = url; (for images)

Translating the text in whizzywig

All the displayed text in whizzywig can be translated.  Create a javascript array called 'language' and add an element for each string you want to translate:
//Language for British English
var language = new Array();
language['Color']  = "Colour";
language['Color name']  = "Colour name";
language['Hilite']  = "Highlight colour";
You can place this code in an an external JavaScript file, or in a script tag  in the head section of your page.
Any string that are displayed by Whizzywig, but which you do not include in your language array, remain unchanged.
for more examples see espanol.js - thanks to Ciro Cogollo for this Spanish translation.
or deutsch.js - thanks to Jürgen Friedrich for this German translation
or francais.js - thanks to Frédéric Meurin for this French translation.

If you'd like to contribute your own translation, please send it.

Inserting stuff with Javascript

There's a whizzywig function called insHTML() you can use to insert your own stuff.

It will insert ordinary text and/or HTML.


For example:

<input value="add" onclick="insHTML(' Some text')" type="button">

or

<input type="button" value="add" onclick="insHTML('<img src=\"logo.gif\" alt=\"Our logo\">')">

(Be careful with embedded quotes)

You can also use this to add formatting:

<input type="button" value="Text Box"
 onclick="insHTML('<div style=\"float:right; width:30%; border:thin solid red;\">')">

Above example will wrap selected text in a red bordered div floated off to one side.
Note that insHTML() will close the tag for you.

Extending the toolbar

You can add your own buttons and pulldowns to the toolbar. See the extended demo and view the source to see how it's done. New at version 51

Customizing with CSS

Cascading Style sheets can be used to override the default style for the toolbar. For instance:
 #controls {background:pink !important} in a style command or external stylesheet will make toolbar pink. It's important to use !important


♠ Powered by Whizzy CMS ♠