HtmlEditor Dialog Format Code Block|UI Control for ASP.NET AJAX, C#, VB.NET

HtmlEditor Dialog Format Code Block in ASP.NET

Home > How to > HtmlEditor Dialogs Format Code Block

Information to the Format Code Dialog

The format code dialog is provided by the PerHtmlEditor Control for editing and formatting various code blocks. Sometimes, you may need to publish a web page which contains a large blocks of codes. Under this condition, in order to keep the web page clean and offer a better viewing experience, we may need to format the code.

Using the format code block dialog of the PerHtmlEditor control, developers can easily add a dialog to the toolbar of the editor, which can enable users to format different code types with desired standards.

Here we list the code types that are supported by the format code block dialog, which are,

XML
CSS
JavaScript
C#
VB code blocks
PHP
Delphi
Python
SQL

In following text, we will briefly illustrate the functions that this format code block dialog has provided. Besides, we will also offer you a programming code to guide you how to add the format code dialog to the toolbar of your html editor in aspx web page.

Functions of the Format Code Block Dialog

In this section, we list the properties that the format code block dialog of the html editor has offered for users.

User is allowed to format specific code type by selecting own programming code.
The size of code table, which is used to input formatted code block, can be fully customized. And scrollbars will be automatically added if the code block is too big.
Preview function is supported so that users can view formatted code before inserting it into the editor content area.
Here we attach an image which shows the main properties the html editor format code dialog has offered.

How to Enable Format Code Dialog

From this part, we will offer you a sample code to show you how to enable the format code block dialog of the html editor in aspx web page.

<kettic:PerHtmlEditor ID="PerHtmlEditor1" runat="server">
                <Tools>
                    <kettic:EditorToolGroup>
                        <kettic:EditorTool Name="FormatCodeBlock" Text="Format Code Block Dialog"></kettic:EditorTool>
                    </kettic:EditorToolGroup>                    
                </Tools>
</kettic:PerHtmlEditor>

Html Editor Dialogs Related Tutorials

Apart from this tutorial for html editor format code dialog, we also provide other tutorials for developers to have a better and deeper understanding of the dialogs that the PerHtmlEditor Control has offered, like:

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