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.
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
- ContentChanged - Server-side event fired on HTML content changing
- 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
- TopToolbarPreservePlace - If true, the top toolbar will have the same size in all modes (Design, Html, Preview)
- 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.