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

HtmlEditor Toolbars Introduction in ASP.NET

Home > How to > HtmlEditor Toolbars Introduction

Information to HtmlEditor Toolbars

What is Toolbar? Toolbar is a bar which contains several buttons and drop-down lists of different tools. To put it in another way, Toolbar can be regarded as a carrier of the tools that has been added to the HtmlEditor control.

What is Editor Tool Group? The PerHtmlEditor Control allows developers to put buttons and drop-down lists that have similar or related functions into the one group and this group is called Editor Tool Group. Besides, developers can also separate different types of tools using Editor Separator within one Editor Tool Group.

An HtmlEditor can have one or more Toolbars and each toolbar can contain more Editor Tool Groups. From this guiding page, you will find detailed sample codes on how to add your own toolbar using HtmlEditor Control in aspx web page.

Programming Example for HtmlEditor Toolbars

In this section, we offer you a sample code which will illustrate how to arrange several buttons and drop-down lists into Editor Tool Group, how to separate tools within one group and how to add fully customized toolbar to HtmlEditor.

<Tools>
                    <kettic:EditorToolGroup>
                        <kettic:EditorTool Name="FindAndReplace"></kettic:EditorTool>
                        <kettic:EditorSeparator></kettic:EditorSeparator>
                        <kettic:EditorTool Name="Undo"></kettic:EditorTool>
                        <kettic:EditorTool Name="Redo"></kettic:EditorTool>
                        <kettic:EditorSeparator></kettic:EditorSeparator>
                        <kettic:EditorTool Name="Cut" ></kettic:EditorTool>
                        <kettic:EditorTool Name="Copy"></kettic:EditorTool>
                        <kettic:EditorTool Name="Paste" ShortCut="CTRL+!"></kettic:EditorTool>
                    </kettic:EditorToolGroup>
                    <kettic:EditorToolGroup>
                        <kettic:EditorTool Name="Bold"></kettic:EditorTool>
                        <kettic:EditorTool Name="Italic"></kettic:EditorTool>
                        <kettic:EditorTool Name="Underline"></kettic:EditorTool>
                        <kettic:EditorSeparator></kettic:EditorSeparator>
                        <kettic:EditorTool Name="ForeColor"></kettic:EditorTool>
                        <kettic:EditorTool Name="BackColor"></kettic:EditorTool>
                        <kettic:EditorSeparator></kettic:EditorSeparator>
                        <kettic:EditorTool Name="FontName" ></kettic:EditorTool>
                        <kettic:EditorTool Name="RealFontSize"></kettic:EditorTool>                        
                    </kettic:EditorToolGroup>
</Tools>

Code Explanation: in above programming code, we add two editor tool groups in one toolbar. And Editor Separator has been used in both editor tool groups.

Following image is used here to represent the result of above HtmlEditor Toolbar creating application.

Related Html Editor Toolbar Tutorial

If you are a C#.NET programmer and you want to set up the toolbar of html editor using C# code, you can visit page to Configure Html Editor Toolbar Using C# Code.

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