Customizing the EditLive! Toolbar

Ephox, February 2004

Summary

EditLive! 4.0 offers great flexibility in allowing you to completely customize the functions offered on the EditLive! toolbars by:

• removing existing toolbar items from the toolbars
• adding your own buttons to the EditLive! toolbars,
• limiting the selection of choices available from a toolbar item (e.g. limiting the fonts available in the Font selection box), and
• disabling a toolbar item so that it appears grayed out.

More Information

Introduction

EditLive! 4.0 offers developers the ability to completely customize the functions offered on the EditLive! toolbars, to give end users a clean EditLive! interface that offers the feature set that suits their EditLive! application.  

Please note that the top EditLive! toolbar is the "Command" toolbar and the bottom EditLive! toolbar is the "Format" toolbar.

Removing existing EditLive! toolbar buttons

EditLive! 4.0 includes a method called RemoveItem that can be used to remove any of the existing EditLive! toolbar items.  When specifying a toolbar item to be removed, the toolbar item name must be specified exactly.  The following code sample would remove the Insert Image button and the Font selection box.

function EditLive1_onload()
{
       editLive1.setEditLiveMode('HTMLString');
       editLive1.setSource('<p>Sample content</p>');
       editLive1.removeItem("InsertImage");
       editLive1.removeItem("Font");
}

For a full list of EditLive! toolbar item names please click here.

Adding buttons to the EditLive! toolbars

EditLive! 4.0 offers you the ability to add your own buttons to the EditLive! toolbar.  This allows you to write your own custom events to occur when the added toolbar buttons are pressed by the end user.  This means that any extra functionality you wish to incorporate into EditLive! can now be added seamlessly to the EditLive! toolbars, making the graphical interface much cleaner for the end user.

To add a button to the toolbar you will need to perform the following steps:

1.  Assign a JavaScript handler for the EditLive ontoolbarbuttonclick event

//Assign a JavaScript handler for the EditLive ontoolbarbuttonclick event
editLive1.ontoolbarbuttonclick = EditLive1_ontoolbarbuttonclick;

2.  Use the AddToolbarButton method to add the button graphic to the end of the specified toolbar.

function EditLive1_onload()
{
       editLive1.setEditLiveMode('HTMLString');
       editLive1.setSource('<p>Sample content</p>');
       editLive1.addToolbarButton("Command","myOpen","http://www.ephox.com/images/open.gif","Open Tooltip");
}

Please note: the location of the toolbar button image must be an absolute URL.

3.  Use the JavaScript handler defined in step 1 to define the custom event to be triggered when the toolbar button is clicked.

function EditLive1_ontoolbarbuttonclick(strButtonName)
{
   if (strButtonName == "myOpen")
       {
          alert("The user clicked the custom button myOpen");
       }
}

Limiting the selection available from a toolbar item

Where users are able to select a value from an EditLive! toolbar item, developers can use EditLive!'s extensive API to limit the choices available to the end user.  For example, the fonts which the end user can select from the font selection box can be limited to 'Arial' and 'Courier New'.  

The following table lists the EditLive! properties, methods and events for limiting the selection available from a toolbar item.

Disabling an EditLive! toolbar item

Rather than completely removing a toolbar item, it is possible to simply disable the functionality so that the toolbar item still appears on the EditLive! toolbar, but is inaccessible to the end user.  For example, the following code sample would disable the paragraph alignment buttons on the EditLive! toolbar.

function EditLive1_onload()
{
       editLive1.setEditLiveMode('HTMLString');
       editLive1.setSource('<p>Sample content</p>');
       editLive1.AllowItem("JustifyLeft", false);
       editLive1.AllowItem("JustifyCenter", false);
       editLive1.AllowItem("JustifyRight",false);
}

For a full list of the EditLive! properties used to disable each of the EditLive! toolbar items please click here.

Related Reading

Ephox EditLive! 4.0 API Reference Guide

List of existing EditLive! toolbar items