You have full control over the user interface of edit-on Pro and can influence every aspect of it - from the order of the toolbar buttons and which of them are available to the pull down and context menu. In addition you can even create custom toolbar buttons and menu items which will open your custom classes or execute your custom JavaScript code inside or outside of the editor.
The configuration of the user interface is made within an XML file. To use an UI configuration file you must specify it using the setUIConfigURL method. The setUIConfigURL must indicate the path to the user interface configuration file. The path may be relative to the editor's codebase.
Example I.9. Loading a user interface configuration file
eop = new editOnPro(725, 350, "myEditor", "myId", "eop");
eop.setCodebase(".");
eop.setUIConfigURL("uiconfig.xml");
eop.setConfigURL("config.xml");
eop.loadEditor();Clicking a toolbar button, a context menu or a pull down menu item may have the same the effect. For example, there may be a separate toolbar button, context menu item and pull down menu item for "bold". Thus, we introduced the concept of "actions". Actions represent operations that are executed when elements of the user interface have been selected. Thus in the example above the toolbar button, menu item and context menu item all result in the same operation, i.e. they all cause the selection to become bold. So, we can say each of those buttons triggers the same action. This means the user interface configuration file consists of four different parts:
Elements defining the actions available in the editor. Default actions supported by the editor do not need to be defined explicitly; they can be referred to by any user interface element without need to define them.
Elements defining the toolbar. Each toolbar button refers to the action fired after selection. The toolbar definition influences the available buttons and the order of the buttons in the toolbar.
Elements defining the pull down menu. Each pull down menu item refers to the action it fires if selected. The pull down menu definition influences the available menu items and the order of the pull down menu items.
Elements defining the context menu. Each context menu item refers to the action it fires if selected. The context menu definition influences the available menu items and the order of the context menu items.
As we said above, the default actions do not need to be defined. However, each action has a number of default properties you may want to modify. You can specify a number of toolbar shortcuts which will fire an action. You can also modify the icon representing an action in the toolbar, context menu and pull down menu.
Example I.10. Defining an action
<action id="BOLD" icon="icons/bold.gif">
<shortcut id="control B" default="true" />
<shortcut id="control F" default="false" />
</action>In the example above we defined the BOLD action. The attribute id determines the action we are defining. The icon attribute allows you to specify a custom icon for the action. This action also has two child elements called shortcut, defining a shortcut triggering the action. The first shortcut will be the default shortcut displayed if the action is used in a pull down menu item while the second shortcut will also trigger the action but is displayed nowhere.
Note:
You will find a list of all action ids available per default in the chapter Actions .
The toolbar consists of several different elements: toolbar buttons, drop-down (choice) boxes, separators and elements marking the end of a row. Each button and choice box must refer to an action while separators and endrow elements just are empty elements. If we'd like to have a toolbar only allowing the user to use bold, italic and underline formatting and select the font size, we'd define it as follows:
Example I.11. Simple toolbar definition
<toolbar>
<button actionid="BOLD" />
<button actionid="ITALIC" />
<button actionid="UNDERLINE" />
<separator />
<choice actionid="FONTSIZE" />
</toolbar>The resulting toolbar will look like this:
As you can see the toolbar only contains the bold, italic and underline buttons, a separator, a choice box and the info button. The info button will always be displayed at the last position in the toolbar.
Defining a customchoice element within your toolbar configuration enables you to group editor actions as well as custom actions within toolbar drop down boxes (choice). Such a drop down box will look like following example:
Example I.12. Simple custom drop down box
<toolbar>
...
<customchoice localeid="My customchoice tooltip" fontsize="20">
<customchoiceitem actionid="BOLD" localeid="Bold"/>
<customchoiceitem actionid="UNDERLINE" localeid="Underline"/>
<customchoiceitem actionid="ITALIC" localeid="Italic"/>
</customchoice>
...
</toolbar>Note:
You will find more information on defining custom drop down boxes within chapter Configuration File . A list of edit-on Pro's default actions can be found in chapter Actions .
The pull down menu consists of menu items, separators and menus which can again contain menu items, separators and menus. A menu can be used to group multiple menu items under a common header. For example you may want to define a menu called "Edit" containing the menu items "Undo", "Redo", "Cut", "Copy" and "Paste".
Example I.13. Simple pull down menu
<menubar>
<menu localeid="Edit">
<menuitem actionid="UNDO"/>
<menuitem actionid="REDO"/>
<separator/>
<menuitem actionid="CUT"/>
<menuitem actionid="COPY"/>
<menuitem actionid="PASTE"/>
</menu>
</menubar>
The resulting pull down menu will look like this:
The definition of the context menu is basically similar to the pull down menu definition, with the exception that the root menu of the contextmenu is the element contextmenu . Another difference is that the list of items available in the context menu is built up dynamically depending on context. For example, items allowing the editing of tables are only available within a table.
Example I.14. Simple context menu
<contextmenu>
<menu localeid="Edit">
<menuitem actionid="UNDO"/>
<menuitem actionid="REDO"/>
<separator/>
<menuitem actionid="CUT"/>
<menuitem actionid="COPY"/>
<menuitem actionid="PASTE"/>
</menu>
</contextmenu>The resulting context menu will look like this:
