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"
/>

ActiveMode - Active editing panel (Design, Html, Preview) on control loaded
AutoFocus - If true, editing panel is focused and cursor is set inside it ("Design" or "HTML text") on initial load or editing panel change
Content - Gets/sets HTML content of HTMLEditor
CssClass - A css class override used to define a custom look and feel for the HTMLEditor. See the HTMLEditor Theming section for more details
DesignPanelCssPath - Sets the path of additional CSS file used for HTMLEditor's content rendering in "Design" panel. If not set, the default CSS file is used which is embedded as a WebResource and is a part of the Toolkit assembly
DocumentCssPath - Sets the path of CSS file used for HTMLEditor's content rendering in "Design" and "Preview" panels. If not set, the default CSS file is used which is embedded as a WebResource and is a part of the Toolkit assembly
Height - Sets the height of the body of the HTMLEditor
HtmlPanelCssClass - A css class override used to define a custom look for the HTMLEditor's "HTML text" mode panel. See the HTMLEditor Theming section for more details
IgnoreTab - If true, Tab key navigation is suppressed inside HTMLEditor control
InitialCleanUp - If true, HTMLEditor's content is cleaned up on initial load. MS Word specific tags are removed
NoScript - If true, JavaScript code is suppressed in HTMLEditor's content
NoUnicode - If true, all Unicode characters in HTML content are replaced with &#code;
OnClientActiveModeChanged - The client-side script that executes after active mode (editing panel) changed
OnClientBeforeActiveModeChanged - The client-side script that executes before active mode (editing panel) changed
SuppressTabInDesignMode - If true, no white spaces inserted on Tab key press in Design mode. Default Tab key navigation is processing in this case
Width - Sets the width of the body of the HTMLEditor

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.