Table of Contents
Table of Contents
Customizing Dialogs

EO.Web Editor uses a set of built-in dialogs for certain functionalities. For example, a built-in Find dialog is used to support search and replace functionalities. All these dialogs can be customized.

Customizing Dialog Templates

Dialog templates (skins) can be used to provide the same look and feel for all or certain dialogs used by the editor. For example, the following code defines a template dialog and applies it to all dialogs used by the editor:

ASPX
Copy 
<eo:Editor runat="server" .....>
    ....
    <!-- Dialog templates collection -->
    <DialogTemplates>
    
        <!-- Multiple templates can be declared inside the collection. 
        However we only use one here. The only template will be regarded
        as the "default" template, thus applies to all dialogs -->
        <eo:EditorDialogTemplate>
            <DialogTemplate>
                <eo:Dialog runat="server" ID="Dialog1" 
                    ControlSkinID="None" BackColor="#47729F">
                    <FooterStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #7d97b6 1px solid; padding-left: 4px; border-left-width: 1px; font-size: 11px; border-left-color: #728eb8; padding-bottom: 4px; color: white; padding-top: 4px; border-bottom: #22456a 1px solid; font-family: verdana"></FooterStyleActive>
                    <HeaderStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #ffbf00 3px solid; padding-left: 4px; font-weight: bold; font-size: 11px; padding-bottom: 2px; color: white; padding-top: 2px; border-bottom: #22456a 1px solid; font-family: verdana"></HeaderStyleActive>
                    <ContentStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #7d97b6 1px solid; padding-left: 4px; border-left-width: 1px; font-size: 11px; border-left-color: #728eb8; padding-bottom: 4px; color: white; padding-top: 4px; border-bottom: #22456a 1px solid; font-family: verdana"></ContentStyleActive>                            
                </eo:Dialog>
            </DialogTemplate>
        </eo:EditorDialogTemplate>
    </DialogTemplates>
    ....
</eo:Editor>

Multiple EditorDialogTemplate objects can be defined in the editor's DialogTemplates collection, with each EditorDialogTemplate identified by an unique Name. At runtime, the editor checks each EditorDialogContent's TemplateID property and tries to locate the EditorDialogTemplate object whose Name matches the EditorDialogContent object's TemplateID property as the dialog's template.

If only one EditorDialogTemplate is defined, or one with its Name set to Default exists, then the template is considered as the default template, which is applied to all dialogs that are not explicitly associated to any other template.

Customizing Individual Dialogs

All built-in dialogs can be replaced by custom dialog. A custom dialog is declared in the editor's DialogContents collection as a EditorDialogContent object. For example, the following code defines two custom dialogs, InsertOrEditImage and InsertOrEditLink:

ASPX
Copy 
<eo:Editor runat="server" .....>
    ....
    <!-- Custom dialog collection -->
    <DialogContents>
    
        <!-- This replaces the default InsertOrEditImage dialog -->
        <eo:EditorDialogContent CommandName="InsertOrEditImage">
            <ContentTemplate>
                <p>Image Url:</p>
                
                <!-- This text box has a special name "eo_editor_insertimage_url"
                that the editor recognizes. The editor regards contents of this
                textbox as the Url of the image to be inserted. -->                
                <input name="eo_editor_insertimage_url">
                <p style="text-align:center">
                
                    <!-- This button uses the editor's client side JavaScript
                    interface to calls back into the editor to insert the image  
                    when clicked. It also has a special name "eo_editor_default_button",
                    which enables button to accept enter key -->
                    <input type="button" value="OK" name="eo_editor_default_button"
                        onclick="eo_GetContainer(this, 'Editor').execDialogCommand('InsertOrEditImage', this);" >
                </p>
            </ContentTemplate>
        </eo:EditorDialogContent>
        
        <!-- This replaces the default InsertOrEditLink dialog -->
        <eo:EditorDialogContent CommandName="InsertOrEditLink">
            <ContentTemplate>
                <p>Target Url:</p>
                <input name="eo_editor_insertlink_url">
                <p>Link Text:</p>
                <input name="eo_editor_insertlink_text">
                <p style="text-align:center">
                    <input type="button" value="OK" name="eo_editor_default_button"
                        onclick="eo_GetContainer(this, 'Editor').execDialogCommand('InsertOrEditLink', this);" >
                </p>
            </ContentTemplate>
        </eo:EditorDialogContent>
    </DialogContents>
</eo:Editor>
At runtime, when EO.Web Editor is about to execute a command, it:
  1. Search DialogContents collection for an EditorDialogContent object whose CommandName matches the command. For example, an EditorDialogContent object with its CommandName set to InsertOrEditImage would be invoked to handle InsertOrEditImage command;
  2. If no matching dialog is found in the editor's DialogContents collection, the built-in dialog for that specific command is used;
  3. Once a dialog is chosen, EO.Web Editor identifies input elements with specific names inside the dialog. A dialog for a specific command must contain input elements with certain pre-defined names. For example, InsertOrEditImage dialog must contain a textbox with its name attributes set to eo_editor_insertimage_url. EO.Web Editor would then regard contents of this textbox as the Url of the image to be inserted.

Default Dialog Definitions

The editor provides a default implementation for every dialog. The easiest way to customize a dialog is usually to make a copy of the default definition and then modify it. Follow these steps to make a copy of the default dialog definitions:

  1. Right click the editor on the Web Form;
  2. Select Customize Dialog... from the context menu;
  3. Select a dialog you want to customize from the dialog list;
  4. Click Copy to copy the default definition for the selected dialog to the clipboard;

You can now switch to HTML view to paste the default dialog definition to the desired location and modify it.

Predefined Input Element Names

When customizing dialogs, certain input elements with pre-defined names can be included, some of them are mandatory. Those elements are automatically associated with certain functionalities based on these names. The following table lists all pre-defined input element names:

Command Input Element Name Type Mandatory Remarks
Find eo_editor_find_text text yes The text to search.
eo_editor_replace_with text The text to replace found match when Replace button is pressed.
eo_editor_find_match_whole_word checkbox Whether the search should match whole word only.
eo_editor_find_match_case checkbox Whether the search should be case sensitive.
eo_editor_find_dir radio Whether the search should be upwards or downwards. Note: Two radio buttons with the same name are required, one for the up option and one for the down option.
InsertOrEditImage eo_editor_insertimage_url text Yes The image Url. Used for the src attribute of the img tag.
eo_editor_insertimage_desc text The image description. Used for the alt attribute of the img tag.
eo_editor_insertimage_width text The image width. Used for the width attribute of the img tag.
eo_editor_insertimage_height text The image width. Used for the height attribute of the img tag.
InsertOrEditLink eo_editor_insertlink_url text Yes The target Url. Used for the href attribute of the a tag.
eo_editor_insertlink_text text The link text. Used for the inner HTML of the a tag.
eo_editor_insertlink_target text The target window. Used for the target attribute of the a tag.
InsertOrEditAnchor eo_editor_insertanchor_name text yes The anchor name. Used for the name attribute of the a tag.
eo_editor_insertanchor_text text The anchor text. Used for the inner HTML of the a tag.
InsertOrEditTable eo_editor_inserttable_cols text yes Number of columns for the table.
eo_editor_inserttable_rows text yes Number of rows for the table.
eo_editor_inserttable_width text The width of the table. Used for the width attribute of the table tag.
eo_editor_inserttable_height text The height of the table. Used for the height attribute of the table tag.
eo_editor_inserttable_bordersize text The border size of the table. Used for the border attribute of the table tag.
eo_editor_inserttable_bordercolor text The border color. Used for the borderColor attribute of the table tag.
eo_editor_inserttable_cellpadding text The cell spacing. Used for the cellSpacing attribute of the table tag.
eo_editor_inserttable_cellspacing text The cell padding. Used for the cellPadding attribute of the table tag.
eo_editor_inserttable_bordercollapse text Specifies whether cell borders are joined in a single border or detached.
Paste eo_editor_paste_text textarea yes The textbox to receive pasted contents.
All dialogs eo_editor_default_button any Use this name to mark a button that should be triggered when user presses enter key.

Handling Dialog Commands

Each custom dialog can contain one or more command buttons that triggers a specific command when clicked. For example, Find dialog contains Find Next, Replace and Replace All button. InsertOrEditImage dialog contains a single OK button.

An onclick handler must be provided for these buttons to trigger specific command. For example, a custom InsertOrEditImage dialog can contain the following button:

HTML
Copy 
<input type="button"
    name="eo_editor_default_button"
    value="Insert"
    style="width:80px;"
    onclick="eo_GetContainer(this, 'Editor').execDialogCommand('InsertOrEditImage', this);" 
/>

When this button is clicked, it calls the containing Editor's execDialogCommand to carry out the command. This button also has its name attribute set to eo_editor_default_button so that the button is also triggered when user presses enter on the dialog.

The following button closes the dialog when clicked:

HTML
Copy 
<input type="button" value="Close" style="width:80px;" 
    onclick="eo_GetContainer(this, 'Editor').closeDialog(this, event);" />