How to Set up HtmlEditor Toolbars of ASP.NET AJAX using CSharp

How to Put up Toolbars of HtmlEditor Using C#

Home > How to > HtmlEditor Toolbars Introduction

Toolbars of HtmlEditor Control refer to the bars where many buttons and drop-down lists of various tools are located. With these Toolbars, users can have a better interaction with the HtmlEditor. For example, you can copy selected text from the HtmlEditor with an easy click on the Copy button that is displayed on the toolbar of the HtmlEditor.

Beside, in order to ensure that users can have a better experience with the html editor, developers may need to populate the tools that have similar or at least related functions into one group. And the grouping work for these buttons and drop-down lists can be easily achieved using the EditorToolGroup property. Remarkably, the PerHtmlEditor Control also enables users to separate the buttons & drop-down lists within one group using EditorSeparator property.

And within one html editor, the number of toolbars is not limited. And within one toolbar, the number of editor tool groups is also not fixed. In this section, we will tell developers how to customize the settings of html editor toolbar using C# .NET programming code.

C# Code for Setting Toolbar of HtmlEditor Control

Following is an easy example for how to set up toolbar of HtmlEditor Control using C# code.

EditorToolGroup group1 = new EditorToolGroup();
PerHtmlEditor1.Tools.Add(group1);
EditorTool cut = new EditorTool();
cut.Name = "Cut";
group1.Tools.Add(cut);
EditorTool copy = new EditorTool();
copy.Name = "Copy";
group1.Tools.Add(copy);

Configure Toolbar by Loading Information from XML File

Apart from above method to set toolbar using C# code programmatically, the PerHtmlEditor Control also enable users to create toolbar from the information that is loaded from xml file. Following example is listed to illustrate how to set up toolbar of html editor with the values that are contained in target xml file.

XML File

<root>

    <tools name="MainToolbar" dockable="true" enabled="true">
      <tool name="FindAndReplace" />
        <tool separator="true"/>
        <tool name="Undo" />
        <tool name="Redo" />
        <tool separator="true"/>
        <tool name="Cut" />
        <tool name="Copy" />
        <tool name="Paste" shortcut="CTRL+!"/>
    </tools>

    <tools name="Formatting" enabled="true" dockable="true">
        <tool name="Bold" />
        <tool name="Italic" />
        <tool name="Underline" />
        <tool separator="true"/>
        <tool name="ForeColor" />
        <tool name="BackColor"/>
        <tool separator="true"/>
        <tool name="FontName"/>
        <tool name="RealFontSize"/>
    </tools>

  <cssFiles>
    <item name="CustomStyles.css" />
  </cssFiles>

</root>

C# Code

PerHtmlEditor1.ToolsFile = "BasicTools.xml";

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