EO.Web Editor supports a set of pre-defined commands. One or more toolbars are usually placed in the header area for quick access to these commands. These toolbars can be customized in several ways.

Choosing ToolBar Set

The easiest way to customize toolbars is setting the editor's ToolBarSet property. Using this property to specify whether the editor displays the basic, standard or all toolbar items.

Choosing ToolBar Items

You can also choose whether to display each tool bar item individually. To customize toolbar on this level, set ToolBarSet to Custom and ToolBarItems to a list of tool bar item that you would like to appear. For example, setting ToolBarItems to:

New,Copy,Cut,Paste

Creates a toolbar with four toolbar buttons: New, Copy, Cut and Paste. This property can also be used to customize tooltip text for toolbar items, which is useful for localization. Please refer to ToolBarItems property for detailed syntax on the list format.

Using Custom Header Layout

The default toolbars can be completely replaced by providing custom header layout using CustomHeaderTemplate property. When CustomHeaderTemplate is set, EO.Web Editor initializes the header region with the contents specified by CustomHeaderTemplate. For example, the following code supplies its own toolbar using this property:

<eo:Editor runat="server" id="Editor1" .... >
    <CustomHeaderTemplate>
        <eo:ToolBar runat="server" id="ToolBar1" ....>
            .... custom tool bar items ....
        </eo:ToolBar>
    </CustomHeaderTemplate>
</eo:Editor>

If a tool bar item's CommandName property matches any of the pre-defined commands, the action associated with the command will be automatically associated to the tool bar item. For example, the following tool bar item automatically performs Undo action when clicked:

<eo:Editor runat="server" id="Editor1" .... >
    <CustomHeaderTemplate>
        <eo:ToolBar runat="server" id="ToolBar1" ....>
            <%-- The following tool bar item automatically performs undo --%>
            <eo:ToolBarItem Text="Undo" CommandName="Undo" />
            .... other custom tool bar items ....
        </eo:ToolBar>
    </CustomHeaderTemplate>
</eo:Editor>

You can include any other standard HTML code or server controls in the template. However additional JavaScript code is needed so that these HTML elements/controls can interact with the editor. For example, the following code places a standard HTML button inside the header area. Since the control is not a ToolBarItem, additional JavaScript is needed --- it calls eo_GetContainer(this, 'Editor').execCommand('Undo') when clicked.

<eo:Editor runat="server" id="Editor1" .... >
    <CustomHeaderTemplate>
       <input type="button" value="Undo" 
           onclick="eo_GetContainer(this, 'Editor').execCommand('Undo');" />
    </CustomHeaderTemplate>
</eo:Editor>

See client side editor object for more information on client side JavaScript interface for the editor control.

Customizing ToolBar Appearance

When custom toolbar is declared inside CustomHeaderTemplate, the toolbar's appearance can be customized directly on the toolbar itself. Please refer to customizing toolbar for more details.

When the toolbar is automatically generated by the editor, ToolBarSkin can be used to choose a built-in skin for the toolbars.

HeaderStyle can be used to set the style to be applied for the whole header area, for example, to provide a border around the whole header area.