HtmlEditor Toolbars Modes and Docking|UI Control for ASP.NET AJAX, C#, VB.NET

HtmlEditor Toolbars Modes and Docking in ASP.NET

Home > How to > HtmlEditor Toolbars Modes and Docking

In this guiding page, you will find two major properties that are responsible for the behavior and position of the toolbars of HtmlEditor, which are ToolbarMode and DockingZone. And in following text, we will illustrate the functions and settings of these two properties respectively.

Information to HtmlEditor Toolbars Modes

The property of ToolbarMode determines the behavior of the toolbar of the PerHtmlEditor Control. And there are several value options for this ToolbarMode property, which are Default, PageTop, ShowOnFocus, Floating, RibbonBar, RibbonBarFloating, RibbonBarPageTop and RibbonBarShowOnFocus.

Now we will briefly demonstrate the different results of applying these available ToolbarMode values.

Default: this ToolbarMode value will make the toolbar appear static and positioned over the content area.
PageTop: under this mode, the toolbar will appear docked at the top of the web page.
ShowOnFocus: under this mode, the toolbar will show right above the editor when it gets the focus.
Floating: in this mode, the toolbar will appear in a pop-up window and it can be dragged around the web page.

Note: other four toolbar mode types, namely, RibbonBar, RibbonBarFloating, RibbonBarPageTop and RibbonBarShowOnFocus have similar effects. The only difference is that using these RibbonBar related toolbar modes, the toolbar will appear in the form of Office style.

How to Set Toolbar Mode of HtmlEditor

Here we attach two programming examples to show you how to set toolbar mode in aspx web page and how to define toolbar mode using C# code.

ASPX Code

<kettic:PerHtmlEditor runat="server" ID="PerHtmlEditor1" ToolbarMode=" PageTop" SkinID="DefaultSetOfTools" Height="675px" Width="755">
</kettic:PerHtmlEditor>

C# Code

PerHtmlEditor1.ToolbarMode = EditorToolbarMode.PageTop;

Information to HtmlEditor Docking Zones

The property DockingZone determines where the toolbar will be placed. For instance, if you want to show the toolbar at the left side of the html editor, you can set the DockingZone attribute to value Left. And the supported style of docking zones include Left, Right, Top, Bottom, Module and the id of outer html element.

How to Set Docking Zone of HtmlEditor

Similarly, from this part, you will find sample codes for how to set docking zone style of html editor in ASP.NET web application programmatically.

ASPX Code

<kettic:PerHtmlEditor runat="server" ID="PerEditor1" SkinID="DefaultSetOfTools"
EnableViewState="false" Height="400px">
                <Tools>
                    <kettic:EditorToolGroup dockingzone="Left">
                        ...
                    </kettic:EditorToolGroup>
                    <kettic:EditorToolGroup dockingzone="Top">
                        ...
                    </kettic:EditorToolGroup>
                    <kettic:EditorToolGroup dockingzone="Right">
                        ...
                    </kettic:EditorToolGroup>
                    <kettic:EditorToolGroup dockingzone="Bottom">
                        ...
                    </kettic:EditorToolGroup>
                    <kettic:EditorToolGroup dockingzone="outerdiv">
                        ...
                    </kettic:EditorToolGroup>
                </Tools>                
            </kettic:PerHtmlEditor>

C# Code

EditorToolGroup right = new EditorToolGroup();
right.Attributes["dockingzone"] = "Right";
PerHtmlEditor1.Tools.Add(right);

Recommended HtmlEditor Toolbar Link

In this part, we recommend an online tutorial of Introduction to HtmlEditor Toolbar, from which developers can find detailed programming examples on how to customize the visual appearance of toolbar by grouping buttons and drop-down lists of various tools in aspx web page.

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