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

HtmlEditor Drop-Down Paragraph Styles in ASP.NET

Home > How to > HtmlEditor DropDowns Paragraph Styles

Information to Drop-down Paragraph Styles

The paragraph style drop-down in the toolbars of html editor provide a collection of paragraph style items for users to select freely. With the drop-down of paragraph styles, users are enabled to perform different styles to the paragraphs located in the editor content area by an easy selection at one certain item from the drop-down list. The PerHtmlEditor Control, by default, contains a pre-defined set of paragraph styles. But developers are allowed to add custom items to the collection of paragraph styles.

And from this tutorial, you will find detailed programming examples for the creation and customization of paragraph style drop-down. If you have any question in building the drop-down of paragraph style, please feel free to contact us.

Here we attach an image to represent the general appearance of the paragraph style drop-down.

How to Enable Drop-down of Paragraph Styles

The activation of the paragraph style drop-down is extremely easy. What you need to do is to declare the drop-down of paragraph styles in aspx web page. You can use the default paragraph style collection that the PerHtmlEditor control has provided. Of course, you can create a custom drop-down collection of the paragraph styles. We will illustrate this in next section.

<kettic:EditorTool Name="Paragraph"></kettic:EditorTool>

How to Add Custom Paragraph Style to Drop-down Collection

Besides the paragraph styles that the PerHtmlEditor control has offered, developers are also allowed to add some custom paragraph styles. Here we attach a sample code to guide you how to add custom paragraph styles to the drop-down collection of paragraph styles in aspx web page.

<kettic:PerHtmlEditor runat="server" ID="PerHtmlEditor1"  SkinID="DefaultSetOfTools"
                EnableViewState="false" Height="400px">
                <Paragraphs>
                    <kettic:EditorParagraph Title="Heading 1" Tag="&lt;H1>" />
                    <kettic:EditorParagraph Title="Heading 2" Tag="&lt;H2>" />
                    <kettic:EditorParagraph Title="Heading 3" Tag="&lt;H3>" />
                    <kettic:EditorParagraph Title="Heading 4" Tag="&lt;H4>" />
                </Paragraphs>
</kettic:PerHtmlEditor>

You can also add custom style to the paragraph style collection using C# code programmatically, as is instructed in following code sample.

PerHtmlEditor1.Paragraphs.Add("Heading 1", "<h1>");
PerHtmlEditor1.Paragraphs.Add("Heading 2", "<h2>");
PerHtmlEditor1.Paragraphs.Add("Heading 3", "<h3>");
PerHtmlEditor1.Paragraphs.Add("Heading 4", "<h4>");

Related Tutorials for Other Supported HtmlEditor Drop-downs

Apart from this paragraph style 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