The menus and toolbars of Ephox EditLive! for XML are completely customizable through the EditLive! for XML configuration process. This article explains how the EditLive! for XML toolbars and menu bars may be configured and how the configuration of the EditLive! for XML menu bar and toolbars affects the functionality of EditLive! for XML.

The menu bar in EditLive! for XML can have any number of individual menus added to it. The names of the menus added to the menu bar are completely customizable. Furthermore, the specification of a mnemonic for the menu is also customizable. To specify the mnemonic for a menu an escaped ampersand (&) must be specified in the name attribute of the relevant <menu> element in the XML configuration file.

For example, this would specify the View menu which has the mnemonic of "V":

<editLive> 
  ... 
  <menuBar> 
    ... 
    <menu name="&amp;View"> 
      ... 
    </menu> 
    ... 
  </menuBar> 
  ... 
</editLive>

<editLive>
  ...
  <menuBar>
    ...
      <menu name="&amp;File">
        <menuItem name="New"/>
        <menuItem name="Open"/>
        <menuItem name="Save"/>
        <menuItem name="SaveAs"/>
      </menu>
    ...
  </menuBar>
  ...
</editLive>

<editLive>
  ...
  <menuBar>
    ...
      <menu name="&amp;View">
        <menuItemGroup name="FrameView"/>
      </menu>
    ...
  </menuBar>
  ...
</editLive>

The About Dialog

The Ephox logo:

and associated About dialog may be removed from the menu interface. The removal of this menu option is achieved through setting the showAboutMenu attribute of the <menuBar> element to false.

For example, the following XML would remove the Ephox branding and associated About dialog from the menu:

<editLive>
  ...
  <menuBar showAboutMenu="false">
    ...
  </menuBar>
  ...
</editLive>      

The EditLive! for XML applet can be instantiated with multiple toolbars. The <toolbar> element is used to specify a toolbar within the EditLive! for XML configuration file. Toolbars will appear within EditLive! for XML in the order which they are listed within the configuration file. When specifying a toolbar with the <toolbar> element the toolbar must be given a unique name via the name attribute. The value of the name attribute does not appear in the user interface of EditLive! for XML.

The following XML would specify a new toolbar with the name format:

<editLive>
  ...
  <toolbars>
    ...
    <toolbar name="format">
      ...
    </toolbar>
    ...
  </toolbars>
  ...
</editLive>      

Each toolbar can have a variety of buttons, button groups and drop down combo boxes added to it. Toolbar buttons are added via the <toolbarButton> element, toolbar button groups through the <toolbarButtonGroup> element and combo boxes through the <toolbarComboBox> element.

<editLive>
  ...
  <toolbars>
    ...
      <toolbar name="command">
        <toolbarButton name="New"/>
        <toolbarButton name="Open"/>
        <toolbarButton name="Save"/>
        <toolbarButton name="SaveAs"/>
      </toolbar>
    ...
  </toolbars>
  ...
</editLive>

<editLive>
  ...
  <toolbars>
    ...
      <toolbar name="command">
        <toolbarButtonGroup name="Align"/>
      </toolbar>
    ...
  </toolbars>
  ...
</editLive>

<editLive>
  ...
    <toolbars>
    ...
      <toolbar name="format">
        ...
        <toolbarComboBox name="tlbStyle">
          <comboBoxItem name="P" text="Normal" />
          <comboBoxItem name="H1" text="Heading 1" />
          <comboBoxItem name="H2" text="Heading 2" />
          <comboBoxItem name="H3" text="Heading 3" />
        </toolbarComboBox>
        ...
      </toolbar>
    </toolbars>
    ...
</editLive>     

Shortcut menu items in EditLive! for XML are specified through the use of a <shrtMenuItem> XML element with a specific value for the name attribute associated with it. EditLive! for XML is provided with a collection of predefined interface items which may be placed on the EditLive! for XML shortcut menu. Items from the interface command collection will have default menu item text associated with them. They may also have default images. The shortcut menu can also contain submenus. For more information on what interface commands are available for use please see the EditLive! for XML Interface Command Collection section of this document.

The following example would add the Cut, Copy and Paste items to the Shortcut menu:

<editLive>
  ...
  <shortcutMenu>
      <shrtMenu>
        <shrtMenuItem name="Cut"/>
        <shrtMenuItem name="Copy"/>
        <shrtMenuItem name="Paste"/>
      </shrtMenu>
  </shortcutMenu>
  ...
</editLive>

Within EditLive! for XML the Element Menu is the right-click menu associated with the Document Navigator Bar. Element menu items are specified through the use of a <elementMenuItem> XML element with a specific value for the name attribute associated with it. EditLive! for XML is provided with a collection of predefined interface items which may be placed on the element menu. Items from the interface command collection will have default menu item text associated with them. They may also have default images. For more information on what interface commands are available for use please see the EditLive! for XML Interface Command Collection section of this document.

The following example would add the Insert Before, Insert After and Insert Into items to the Element menu:

<editLive>
  ...
  <shortcutMenu>
      <elementMenu>
        <elementMenuItem name="xmlInsertBefore"/>
        <elementMenuItem name="xmlInsertAfter"/>
        <elementMenuItem name="xmlInsertAtCurrent"/>
      </elementMenu>
  </shortcutMenu>
  ...
</editLive>

Submenus can be added to the EditLive! for XML menu bar and shortcut menu. The submenus available for use in EditLive! for XML are the Font, (font) Size and Style submenus. These are added through the use of the <submenu> XML element with a specific value for the name attribute.

The <submenu>, if left empty, each of the submenus added will contain the same items as the corresponding item on the EditLive! for XML toolbar. If the corresponding item does not exist on the toolbar then the submenu will appear empty. If the developer wishes to make the submenu items distinct from the toolbar items the <submenu>element may have <menuItem> child elements added to it. It should be noted that once menu items are specified within a submenu then the contents of the submenu will no longer mirror the corresponding toolbar element.

The following example would add the Font submenu to the Format menu with items on the submenu corresponding to the items specified in the Font drop down combo box of the EditLive! for XML toolbar:

<editLive>
  ...
  <menuBar>
    ...
    <menu name="Format">
      ...
      <submenu name="mnuFontFace"/>
      ...
    </menu>
    ...
  </menuBar>
  ...
</editLive>      

The following example would add the Style submenu to the Shortcut menu with items on the submenu corresponding to the items specified in the Font drop down combo box of the EditLive! for XML toolbar:

<editLive>
  ...
  <shortcutMenu>
    <shrtMenu>
      ...
      <submenu name="mnuFontFace" />
      ...
    </shrtMenu>
  </shortcutMenu>
  ...
</editLive>

The following example would add the Style submenu to the Format menu. The menu created would contain the Normal and Heading 1 which respectively correspond to the <P> and <H1> styles. Note that this submenu would NOT contain the values from the corresponding toolbar item.

<editLive>
  ...
  <menuBar>
    ...
    <menu name="Format">
      ...
      <submenu name="mnuFontStyle">
        <menuItem name="P" text="Normal" />
        <menuItem name="H1" text="Heading 1" />
      </submenu>
      ...
    </menu>
    ...
  </menuBar>
  ...
</editLive>       

The submenus available for use with EditLive! for XML, their corresponding toolbar item, mnemonic and their associated value for the <submenu> name are listed below in the Submenu Items section of the EditLive! for XML Interface Command Collection.

The interface items available through the standard EditLive! for XML interface command collection can be customized to allow the associated text, mnemonic and image to be altered. These customizations can be performed on menu and toolbar items by setting the text, imageURL and mnemonic attributes of the <menuItem> and <shrtMenuItem> and the text and imageURL attributes of the <toolbarButton> element.

The following example customizes the New menu item to use the text Create New, the image customImage.gif and the mnemonic c.

<editLive>
  ...
  <menuBar>
    ...
      <menu name="&amp;File">
        <menuItem 
          name="New"
          text="Create New"
          imageURL="customImage.gif"
          mnemonic="c"
        />
        ...
      </menu>
    ...
  </menuBar>
  ...
</editLive>

<editLive>
  ...
  <menuBar>
    ...
      <menu name="F&amp;ormat">
        ...
        <submenu name="mnuColor">
          <menuItem name="#FF0000" text="Red" />
          <menuItem name="blue" text="Blue" />
          <menuItem name="green" text="Green" />
        </submenu>
        ...
      </menu>
    ...
  </menuBar>
  ...
</editLive>

<editLive>
  ...
  <toolbars>
    ...
      <toolbar name="format">
        ...
        <toolbarComboBox name="tlbHighlightColor">
          <comboBoxItem name="#FF0000" text="Red" />
          <comboBoxItem name="blue" text="Blue" />
          <comboBoxItem name="green" text="Green" />
        </toolbarComboBox>
        ...
      </toolbar>
    ...
  </toolbars>
  ...
</editLive>

Custom items can be added to the EditLive! for XML menus and toolbars. This gives the developer greater flexibility when integrating EditLive! for XML in existing systems. It allows developers to complement the functionality of EditLive! for XML with existing JavaScript functions and also to extend the menus and toolbars of the EditLive! for XML applet to include custom functionality.

EditLive! for XML allows for the specification of custom menu items, custom toolbar buttons and custom toolbar combo boxes, this can be done with the <customMenuItem>, <customToolbarButton> and <customToolbarComboBox> elements respectively.

When creating custom items to use with EditLive! for XML setting the xhtmlonly attibute to true ensures that the custom interface item will only be enabled whilst the cursor is within an XHTML section.

For more information on how to use custom items in EditLive! for XML please see the article on Custom Menu and Toolbar Items for EditLive! for XML.

EditLive! for XML can be configured to use a tabbed view which allows users to more intuitively switch between different views. These tabs can be placed on the top or bottom of the EditLive! for XML editing area, they can also be removed completely. The configuration of the tabbed view for EditLive! for XML is achieved via the tabPlacement attribute of the <wysiwygEditor> element.

For example, the following XML would place the view tabs at the top of the EditLive! for XML editing pane.

<editLive>
    ...
    <wysiwygEditor tabPlacement="top">
    ...
</editLive>       

The tabbed view settings for use with EditLive! for XML and their associated value for the <wysiwygEditor> tabPlacement attribute are listed below.

Example Image	Function	XML tabPlacement Attribute
	Place tabs at the top of the editing pane.	top
	Place tabs at the bottom of the editing pane.	bottom
	Remove tabs.	off

Both the menu bar and either of the toolbars of EditLive! for XML may be removed. In order to display EditLive! for XML without any toolbars ensure that there are no <toolbar> elements within the configuration file.

To remove the menu bar ensure that the <menuBar>element is empty (i.e. it has no child elements) and ensure that the showAboutMenu attribute of the <menuBar>element is set to false.

Removing specific functionality from EditLive! for XML is achieved by removing the corresponding menu and/or toolbar buttons from the EditLive! for XML interface. When the item is not included in the XML configuration then the item will not appear on the menu or toolbar and, in most cases, the shortcut key for the item will be disabled.

It should be noted that the shortcut keys for the Cut, Copy, Paste, Bold, Italic and Underline actions will always be enabled. This is independent of the associated menu items and toolbar buttons. Thus, the shortcut keys for these functions will still be functional even if the associated menu items or toolbar buttons are removed.

The interface for EditLive! for XML is highly customizable. Through the EditLive! for XML configuration process developers gain the flexibility to make the interface for EditLive! for XML as simple or as complex as they wish. EditLive! for XML is supplied with a standard complement of menu and toolbar items providing editor functionality. These items are listed in the above sections of this document along with all the relevant information pertaining to each item.

Furthermore, EditLive! for XML gives the developer the ability to create custom functionality which can be accessed through custom menu and toolbar items. This can be used to complement the functionality of the EditLive! for XML applet with the developers own custom functions and macros.

Finally, through the exclusion of relevant menu and toolbar items the developer can limit the functionality of the EditLive! for XML applet, thus preventing end users from accessing functionality which the developer does not wish them to.