Customizing Dialogs

The same content in Microsoft HTML help file format is included in the download package.

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:

<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:

<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:

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;
If no matching dialog is found in the editor's DialogContents collection, the built-in dialog for that specific command is used;
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:

Right click the editor on the Web Form;
Select Customize Dialog... from the context menu;
Select a dialog you want to customize from the dialog list;
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.
InsertOrEditAnchor	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:

<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:

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

Direct link to this topic