Ajax Control Toolkit HTMLEditor

Modified on 2010/04/16 00:35 by Stephen Walther — Categorized as: Uncategorized

HTMLEditor is an ASP.NET AJAX Control that allows you to easily create and edit HTML content. Various buttons in toolbar are used for content editing. You can see generated HTML markup and preview document.

HTMLEditor Server Properties

The properties in italics are optional.

<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit.HTMLEditor"
    TagPrefix="HTMLEditor" %>
...
<HTMLEditor:Editor runat="server" 
        Height="300px" 
        Width="100%"
        AutoFocus="true"
/>

HTMLEditor Theming

You can change the look and feel of HTMLEditor using the HTMLEditor CssClass property. HTMLEditor has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\HTMLEditor\Editor.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is used. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a HTMLEditor control can be styled accordingly. For example if the CssClass property was set to "CustomEditorStyle" this is how the css to style the HTMLEditor top toolbar would look:
.CustomEditorStyle .ajax__htmleditor_editor_toptoolbar {
        background-color:#F0F0F0; padding: 0px 0px 2px 2px;
}

HTMLEditor CSS classes

.ajax__htmleditor_editor_container: A container element (table) that wraps all of the HTMLEditor. 
Child CSS classes: .ajax__htmleditor_editor_toptoolbar, .ajax__htmleditor_editor_editpanel, .ajax__htmleditor_editor_bottomtoolbar. 

.ajax__htmleditor_editor_toptoolbar: A container element that wraps all buttons of the top toolbar. 
Child CSS classes: .ajax__htmleditor_toolbar_button, .ajax__htmleditor_toolbar_button_hover. 

.ajax__htmleditor_editor_editpanel: A container element that wraps editing panel (in any mode). 
Child CSS classes: none. 

.ajax__htmleditor_editor_bottomtoolbar: A container element that wraps all buttons of the bottom toolbar. 
Child CSS classes: .ajax__htmleditor_toolbar_button, .ajax__htmleditor_toolbar_button_hover. 

.ajax__htmleditor_toolbar_button: This is applied to a button of toolbar. 
Child CSS classes: none. 

.ajax__htmleditor_toolbar_button_hover: This is applied to a button of toolbar when the mouse is hovering over. 
Child CSS classes: none. 

div.ajax__htmleditor_toolbar_button label: This is applied to a <label> element of "selector button" in toolbar (Font, Size). 
Child CSS classes: none. 

div.ajax__htmleditor_toolbar_button select: This is applied to a <select> element of "selector button" in toolbar. 
Child CSS classes: none. 

div.ajax__htmleditor_toolbar_button select option: This is applied to <select> element's options of "selector button" in toolbar. 
Child CSS classes: none.