The control above is initialized with this code. The italic properties 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

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.