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

HtmlEditor DropDown Colors in ASP.NET

Home > How to > HtmlEditor DropDowns Color

In this online guiding page, we will show developers how to add a collection of colors to the toolbars in the form of drop-down. With these color drop-downs, users can easily control the text color and the background color of editor content area.

How to Create Drop-downs of Colors

By default, there are two color drop-downs in the PerHtmlEditor, which are fore-color drop-down and back-color drop-down. This is a screen shot of the expanded drop-down of fore-color which is responsible for the text color.

Following example is used to show developers how to add both fore-color drop-down and back-color drop-down to the toolbars of html editor. Note: the color items that are listed in these two color drop-downs are all with default values. If you want to add custom color item to the drop-down, please refer to the sample code listed in next section.

<kettic:PerHtmlEditor runat="server" ID=" PerHtmlEditor1" SkinID="DefaultSetOfTools"
                EnableViewState="false" Height="400px">
               
                <Tools>
                    <kettic:EditorToolGroup>
                        <kettic:EditorTool Name="ForeColor"></kettic:EditorTool>
                        <kettic:EditorTool Name="BackColor"></kettic:EditorTool>
                        
                    </kettic:EditorToolGroup>                
                </Tools>
                
</kettic:PerHtmlEditor>

How to Add Custom Color to Drop-down

In above sections, we just show you how to build a drop-down collection with default color values. And one thing that needs to be mentioned here is that, similar to other color controllers, the PerHtmlEditor Control is also able to add custom color items to the target collection. Now, we will guide you how to add custom color to the color drop-down collection of the PerHtmlEditor control.

If you want to add custom color items to drop-down list in aspx web page, you can follow the declarations that are listed below.

<kettic:PerHtmlEditor runat="server" ID="PerHtmlEditor1"  SkinID="DefaultSetOfTools"
                EnableViewState="false" Height="400px">
                <Colors>
                    <kettic:EditorColor Value="Crimson" />
                    <kettic:EditorColor Value="#FF8C00" />
                </Colors>  
</kettic:PerHtmlEditor>

If you want to add custom colors to target color collection using C# programming code, you can use the property of Colors.Add()as is showed in following sample code.

PerHtmlEditor1.Colors.Add("Crimson");
PerHtmlEditor1.Colors.Add("#FF8C00");

Related Tutorials for Other Supported HtmlEditor Drop-downs

Apart from above mentioned color related drop-downs, the PerHtmlEditor Control for ASP.NET AJAX also allows users to create other commonly used drop-downs in html editor. Following links will take you to detailed programming guiding pages on how to add these drop-downs to html editor in ASP.NET web application.

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