HtmlEditor Modules|UI Control for ASP.NET AJAX, C#, VB.NET

HtmlEditor Modules in ASP.NET

Home > How to > HtmlEditor Modules

Apart from the tool buttons, drop-downs and dialogs placed at the toolbars of the html editor control, the PerHtmlEditor Control also enables developers to represent some special tools with system modules. These modules can be easily added or removed to / from the html editor. Besides, you can create a custom module with own pre-defined purpose.

In this online tutorial, we will illustrate the functions of various module types. Besides, from this guiding page, you can also find detailed programming example on how to create module to html editor using ASP.NET AJAX.

Modules Types for Html Editor

There are four types of modules supported by the PerHtmlEditor Control, which are Statistics, Dom Inspector, Node Inspector and Html Inspector. In following text, we will briefly illustrate the functions of each supported module type.

Statistics: developers can use this module to show the text statistics in the html editor. In general, if you add this statistics module to the html editor, users can easily know how many words and how many characters are contained in the content area.
Dom Inspector: this module is used to demonstrate the DOM path of current tag, which enables users to easily select a given tag in the hierarchy.
Node Inspector: using this module, developers can easily display relevant properties of the currently selected tag in the html editor.
Html Inspector: after you add this module to the html editor, there will be a pane appearing right below the content area in the html editor. And the pane will show the HTML code of the current editor content. Remarkably, this HTML code pane is in real-time sync with the editor content. That is to say, if you modify any content in the content area, the HTML code pane will be updated automatically and vice verse.

The image below aims to represent the visual existence of these four modules that the PerHtmlEditor Control has supported.

Note: the modules that are added to the PerHtmlEditor Control can be easily removed.

How to Add Custom Modules to Html Editor

Apart from the four common modules, the PerHtmlEditor Control also allows developers to add custom module to the html editor. For instance, you can create a module, using which you can easily display the number of tables or images that are included in the html editor.

ASPX Code

<kettic:PerHtmlEditor runat="server" ID="PerHtmlEditor1"                             SkinID="DefaultSetOfTools" Height="675px" Width="755" Skin="Forest">                        
                            <Modules >
                                <kettic:EditorModule Name="PerHtmlEditorDomInspector" Enabled="true" Visible="true" />
                                <kettic:EditorModule Name="PerHtmlEditorHtmlInspector"  Enabled="true" Visible="true" />
                                <kettic:EditorModule Name="PerHtmlEditorNodeInspector"  Enabled="true" Visible="true" />
                                <kettic:EditorModule Name="PerHtmlEditorStatistics"  Enabled="true" Visible="true" />
                                                            </Modules>                             
</kettic:PerHtmlEditor>

C# code

EditorModule moduleStatistics = new EditorModule();
moduleStatistics.Name = "PerEditorStatistics";
PerHtmlEditor1.Modules.Add(moduleStatistics);
EditorModule moduleDomInspector = new EditorModule();
moduleDomInspector.Name = "PerEditorDomInspector";
PerHtmlEditor1.Modules.Add(moduleDomInspector);
EditorModule moduleNodeInspector = new EditorModule();
moduleNodeInspector.Name = "PerEditorNodeInspector";
PerHtmlEditor1.Modules.Add(moduleNodeInspector);
EditorModule moduleNodeInspector = new EditorModule();
moduleNodeInspector.Name = "PerHtmlEditorHtmlInspector";
PerHtmlEditor1.Modules.Add(moduleNodeInspector);

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control ASP.NET AJAX Calendar UI Control ASP.NET AJAX NavigationBar UI Control ASP.NET AJAX Captcha UI Control ASP.NET AJAX Color Editor UI Control ASP.NET AJAX ComboBox UI Control ASP.NET AJAX DataPager UI Control ASP.NET AJAX Dock UI Control ASP.NET AJAX DropDownList UI Control ASP.NET AJAX DropDownTree UI Control

ASP.NET AJAX HtmlEditor UI Control

Overview Getting Started

ToolBars

Introduction Modes and Docking Button

DropDowns

Font Paragraph Styles Colors CSS Styles Insert Table

Dialogs

Introduction Format Code Block XHTML Validator Spellchecker

Modules

Features

Edit modes Editor Showing Track Changes Comments Import and Export

Managing Content

Formatting

Client Prpgramming

HtmlEditor Event ASP.NET AJAX FileManager UI Control ASP.NET AJAX Filter UI Control ASP.NET AJAX Input UI Control ASP.NET AJAX ListBox UI Control ASP.NET AJAX ListView UI Control ASP.NET AJAX ToolBar UI Control ASP.NET AJAX TabControl UI Control ASP.NET AJAX Menu UI Control ASP.NET AJAX ToolTip UI Control