$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
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.
<kettic:EditorTool Name="FindAndReplace"></kettic:EditorTool>
<kettic:EditorTool Name="Undo"></kettic:EditorTool>
<kettic:EditorTool Name="Redo"></kettic:EditorTool>
<kettic:EditorTool Name="Cut" ></kettic:EditorTool>
<kettic:EditorTool Name="Copy"></kettic:EditorTool>
<kettic:EditorTool Name="Paste" ShortCut="CTRL+!"></kettic:EditorTool>
C# Code
EditorToolGroup group1 = new EditorToolGroup();

EditorTool cut = new EditorTool();
cut.Name = "Cut";
EditorTool copy = new EditorTool();
copy.Name = "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

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

<item name="CustomStyles.css" />

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.