HtmlEditor Drop-Down Font|UI Control for ASP.NET AJAX, C#, VB.NET

HtmlEditor Drop-Down Font in ASP.NET

Home > How to > HtmlEditor DropDowns Font

Information to HtmlEditor Drop-down Font

Drop-down is one of the three major tool displaying forms that are used to represent tools in the toolbar of html editor (The other two forms are dialog and button). The drop-down includes several functional items and it displays these items in the form of list. Users can easily perform certain function by selecting one item from the drop-down list.

The PerHtmlEditor Control enables developers to add various drop-downs in the toolbar of the html editor. And in this online tutorial, we will introduce the font related drop-downs, which are font name drop-down, font size drop-down and real font size drop-down.

In following text, we will illustrate above mentioned drop-down respectively.

How to Set Font Name

The PerHtmlEditor Control offers a list of pre-defined set of font styles, including Arial, Courier New, Garamond, Georgia, MS Sans Serif, Segoe UI, Tahoma, Times New Roman and Verdana. And developers are allowed to set these fonts using the FontName Collection.

Following example is used to guide you how to create a new drop-down which includes a set of font name items using programming code.

<kettic:PerHtmlEditor runat="server" ID="PerHtmlEditor1" 
SkinID="DefaultSetOfTools" EnableViewState="false" Height="400px">
                <FontNames>
                    <kettic:EditorFont Value="Arial" />
                    <kettic:EditorFont Value="Courier New" />
                    <kettic:EditorFont Value="Garamond" />
                </FontNames>
</kettic:PerHtmlEditor>

How to Set Font Size

In this section, we will guide you to create a drop-down of font sizes. The PerHtmlEditor Control allows developers to populate seven font size items, ranging from value 1 to value 7. Following sample code is used to illustrate how to add the font sizes collection to the html editor declaratively.

<kettic:PerHtmlEditor runat="server" ID="PerHtmlEditor1" 
SkinID="DefaultSetOfTools" EnableViewState="false" Height="400px">
                 <FontSizes>
                    <kettic:EditorFontSize Value="1" />
                    <kettic:EditorFontSize Value="2" />
                    <kettic:EditorFontSize Value="3" />
                    <kettic:EditorFontSize Value="4" />
                    <kettic:EditorFontSize Value="5" />
                    <kettic:EditorFontSize Value="6" />                     
                    <kettic:EditorFontSize Value="7" />
                </FontSizes>
</kettic:PerHtmlEditor>

How to Set Real Font Size

Different from the drop-down of font sizes, this drop-down collection of real font sizes will display the font sizes in pixels and points. Similarly, here we attach an example to show you how to use create the drop-down collection of real font sizes declaratively in aspx web page.

<kettic:PerHtmlEditor runat="server" ID="PerHtmlEditor1" 
SkinID="DefaultSetOfTools" EnableViewState="false" Height="400px">
<RealFontSizes>
                    <kettic:EditorRealFontSize Value="8px" />
                    <kettic:EditorRealFontSize Value="9px" />
                    <kettic:EditorRealFontSize Value="10px" />
                    <kettic:EditorRealFontSize Value="11px" />
                </RealFontSizes>
</kettic:PerHtmlEditor>

Related Tutorials for Other Supported HtmlEditor Drop-downs

Apart from this font drop-down, the PerHtmlEditor Control for ASP.NET AJAX also allows users to create other commonly used drop-downs. 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