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

HtmlEditor Button in ASP.NET

Home > How to > HtmlEditor Buttons

Information to HtmlEditor Button

The tools in the html editor toolbar may appear in three possible forms, which are button, drop-down list and dialog. And in this guiding page, we will put the focus on one tool displaying form, button. If we choose to display the tools in the html editor toolbar using button form, then users can directly perform the functions of these tools by an easy click on the buttons.

The PerHtmlEditor control allows users to add tool buttons (either the ones from existing buttons or those own custom buttons) and remove tool buttons in or from the toolbar of html editor. And following text will offer detailed guidance on how to configure the buttons in the toolbar of html editor.

How to Add Button

In this section, we will guide you how to configure the html editor toolbar by adding tool buttons.

Add Button from Collection of Existing Editor Tool Buttons

The PerHtmlEditor Control has embedded a list of common used editor tools which will be added to the toolbar in the form of button, including cut, copy, bold, print, find and replace. Therefore, you can add those existing tool buttons to editor toolbar by simple assigning the Name of the EditorTool property.

To help you have a better understanding of above tool button adding process, we here specifically offer a sample code which will show you how to add cut & copy tools to the toolbar in the form of button.

ASPX Code

<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>
</Tools>

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);

One thing that needs to be mentioned here is that apart from above method to add button to toolbar by adding programming code directly, you can also add button via xml file. And detailed programming steps have been listed in the sample code below.

XML Code

<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";

Add Custom Button to Html Editor Toolbar

If our provided tool buttons can not meet your need, you can also add your own custom tool button to the toolbar of html editor control.

How to Remove Button

If you want to remove or delete one or more tool buttons from the html editor toolbar, you can just remove target EditorTool from the aspx code or the xml file.

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