Changing the toolbar items

To hide or change the order of the controls on the toolbar

You can do this in either of two ways:

  1. Using the title attribute of the element, e.g. 
    title="bullet number image link text"

  2. Setting the variable 'wz_toolbar' in javascript, which will set the toolbar for all Whizzywings on the page

The default commands you can use in the title attribute, or define once for all editors on a page with "wz_toolbar=", are: 

'block text left center right insert link image table source'

If you don't explicitly  set any toolbar controls you will get all of these except  'source'. 

This set, in this order, can be defined by just 'default'. You can then add others: 'default source'  would be a common requirement - like the sample on the top of this page.  

Or if you prefer, 'source default'  to make the source button the first one.

You can also exclude items from the default by prefixing them with a '-'. 
So: 

 'default -table -insert

excludes the table and insert controls from the default set and is equivalent to

 'block text left center right link image'

To add your own items to the toolbar

You can add any control of your own devising - see the Tailored Toolbar Demo and view the source. You will need to define the action using _.control. For example 'red' is defined as 

_.control['red']=_.btn('Red', '<font color=red>', '<b style=\"color:red\">A</b>');
This creates a _.control called 'red'

_.btn is a function that takes up to 4 arguments

  • title (displayed when the control is hovered over)
  • HTML to insert (it will also take a valid execCommand)
  • Some HTML or text to display on the button
  • an optional parameter to execCommand (not needed in the above example)

Note that this example appears to insert a deprecated <font> tag but the clean up code will change that into CSS. If a control is included in the list given in the textarea title orwz_toolbar variable but there is no_.control defined for it, then it just isn't shown.

To add or change a dropdown control

There is a helper function called _.drop for building dropdown controls like the 'block' and 'character' controls in the default.

_.control['font']=_.drop('<i style=font-family:serif>Font</i>',
//HTML for each item displayed: comma separated array
['<font face=\'Arial,sans-serif\'>Arial</font>',
'<font face=\'Comic Sans MS\'>Comic Sans</font>',
'<font face=\'Georgia,serif\'>Georgia</font>',
'<font face=\'monospace\'>Monospace</font>',
'<font face=\'Verdana\'>Verdana</font>'],
//HTML to insert when clicked (or execCommand)
['<font face=Arial,sans-serif>',
'<font face=\\\'Comic Sans MS\\\'>',
'<font face=Georgia,serif>', 
'<font face=monospace>',
'<font face=Verdana>']);
  • So the first parameter to _.drop is the HTML or text that appears on the button.
  • The second parameter is an array for the HTML or text in each line of the array.
  • The third parameter is an array (paired with the above) for the HTML to insert when the item is clicked. This can also be an execCommand.