HTML Editor Elements

  • 5 minutes to read

This topic describes the ASPxHtmlEditor elements visible on screen. Each section contains a screenshot and a brief overview of the element’s function. Additionally, each section contains the list of settings that specify the element’s appearance.

ASPxHtmlEditor-VE_Overview

Toolbar

Toolbars are displayed in the Bar Dock Container when the ASPxHtmlEditor.ToolbarMode is set to Menu. Toolbars contain Toolbar Items, such as toolbar buttons and toolbar editors. ASPxHtmlEditor provides a set of default toolbar items and allows you to create custom toolbar items.

HTML Editor Toolbar

Characteristics

Members

Visibility

ASPxHtmlEditor.ToolbarMode

Toolbar Collection

ASPxHtmlEditor.Toolbars

Availability

ASPxHtmlEditor.ToolbarMode

Appearance

ToolbarsStyles.Toolbar, ToolbarsStyles.ToolbarItem, ToolbarsStyles.BarDockControl

Ribbon

The Ribbon is displayed at the top of the editor. It serves as the main menu for the editor and contains ribbon item elements. The Ribbon is displayed when the ASPxHtmlEditor.ToolbarMode property is set to Ribbon.

Ribbon

The style settings of ribbon elements are specified by the ToolbarsStyles.Ribbon property.

Tabs

The collection of ribbon tabs can be customized using the ASPxHtmlEditor.RibbonTabs property. The table below lists the main members that affect ribbon tab appearance and functionality.

Characteristics Members
Text RibbonTab.Text
Visibility RibbonTab.Visible

Groups

Groups are contained in a tab’s RibbonTab.Groups collection, and are used to divide ribbon items within a tab into logical groups. The table below lists the main members that affect ribbon group appearance and functionality.

Characteristics Members
Text RibbonGroup.Text
Group Expand Button Image RibbonGroup.Image
Visibility RibbonGroup.Visible
Items RibbonGroup.Items

Items

Items are contained in a group’s RibbonGroup.Items collection. An action on an item (e.g., a button click or an editor value change) performs the corresponding action. The table below lists the main members that affect ribbon item appearance and functionality.

Characteristics Members
Text RibbonItemBase.Text
Image RibbonButtonItem.SmallImage, RibbonButtonItem.LargeImage
Tooltip RibbonItemBase.ToolTip
Style RibbonItemBase.ItemStyle
Size RibbonItemBase.Size
Item Separator Visibility RibbonItemBase.BeginGroup
Visibility RibbonItemBase.Visible

Context Tab Category

The collection of ribbon context tab categories can be customized using the ASPxHtmlEditor.RibbonContextTabCategories property. A context tab category is a container for context tabs, which are hidden tabs that are displayed on demand, e.g., when a corresponding element, such as an image or a table, is selected. The table below lists the main members that affect ribbon group appearance and functionality.

Characteristics Members
Color RibbonContextTabCategory.Color
Tabs RibbonContextTabCategory.Tabs
Visibility RibbonContextTabCategory.Visible, RibbonContextTabCategory.ClientVisible

Tag Inspector

The Tag Inspector allows end-users to navigate through the tag hierarchy, remove tags, and customize tag properties using the Change Element Properties dialog.

The Tag Inspector is displayed when the design view area is active, provided the ASPxHtmlEditorSettings.ShowTagInspector property is set to true.

TagInspector

The image below demonstrates the Tag Inspector in detail.

TagInspector_Details

The table below lists the main members that affect element appearance.

Elements Members
Tag style HtmlEditorTagInspectorStyles.Tag
Separator image HtmlEditorImages.TagInspectorSeparator
Ellipsis style HtmlEditorTagInspectorStyles.Ellipsis
Selected tag container style HtmlEditorTagInspectorStyles.SelectedTagContainer
Selected tag style HtmlEditorTagInspectorStyles.SelectedTag
Remove element button image HtmlEditorImages.TagInspectorRemoveElementButton
Change element button image HtmlEditorImages.TagInspectorChangeElementButton

Content Area

The Content Area is a container for the View Area and Status Bar. The View Area includes the Design View Area, HTML View Area, and Preview Area. Use tabs to select a view.

The Design View Area allows end-users to modify the editor content using various visual tools, and instantly see the results. The Design View Area is displayed in the view area when the Design tab is active.

The Html View Area allows end-users to modify the editor content using HTML markup. The Html View Area is displayed in the view area when the HTML tab is active.

The Preview Area allows end-users to view the editor content as a regular webpage. The Preview Area is displayed in the view area when the Preview tab is active.

Content Area

The table below lists the main members that affect elements appearance and functionality.

Characteristics

Members

Appearance

HtmlEditorStyles.ContentArea,
HtmlEditorStyles.ViewArea,
HtmlEditorStyles.DesignViewArea,
HtmlEditorStyles.HtmlViewArea,
HtmlEditorStyles.PreviewArea

Availability

ASPxHtmlEditorSettings.AllowDesignView,
ASPxHtmlEditorSettings.AllowHtmlView,
ASPxHtmlEditorSettings.AllowPreview

Settings

ASPxHtmlEditorSettings.SettingsHtmlView

Tab Caption

ASPxHtmlEditorTextSettings.DesignViewTab,
ASPxHtmlEditorTextSettings.HtmlViewTab,
ASPxHtmlEditorTextSettings.PreviewTab

Paste Options Bar

The Paste Options Bar allows end-users to change formatting of the pasted HTML content. The bar appears in the top right corner of the design view area after content is pasted.

PastingOptionsBar

By default, the Paste Options Bar is disabled; set the ASPxHtmlEditorHtmlEditingSettings.EnablePasteOptions property to true to enable it.

Status Bar

The Status Bar is displayed at the bottom of the ASPxHtmlEditor control and contains the tabs and size grip element.

ASPxHtmlEditor-StatusBar

The table below lists the main members that affect element appearance and functionality.

Characteristics Members
Appearance ASPxHtmlEditor.StylesStatusBar

Tab

Tabs are displayed in the status bar and allow end-users to switch between the editor’s view areas. The Active Tab corresponds to the currently displayed view area.

ASPxHtmlEditor-Tab

The table below lists the main members that affect element appearance and functionality.

Characteristics

Members

Availability

ASPxHtmlEditorSettings.AllowDesignView,

ASPxHtmlEditorSettings.AllowHtmlView,

ASPxHtmlEditorSettings.AllowPreview

Tab Captions

ASPxHtmlEditorTextSettings.DesignViewTab,

ASPxHtmlEditorTextSettings.HtmlViewTab,

ASPxHtmlEditorTextSettings.PreviewTab

Appearance

HtmlEditorStatusBarStyles.Tab,

HtmlEditorStatusBarStyles.ActiveTab

Size Grip

The Size Grip is displayed at the bottom right corner of the editor’s status bar, and allows end-users to resize the editor.

ASPxHtmlEditor-SizeGrip

The table below lists the main members that affect element appearance and functionality.

Characteristics Members
Visibility HtmlEditorResizeSettings.AllowResize
Image HtmlEditorImages.SizeGrip
Style HtmlEditorStatusBarStyles.SizeGrip

Loading Panel

The Loading Panel is displayed in the ASPxHtmlEditor‘s loading div and dialogs elements while waiting for a callback response.

LoadingDiv

The table below lists the main members that affect element appearance and functionality.

Characteristics Members
Settings ASPxHtmlEditor.SettingsLoadingPanel
Appearance HtmlEditorStyles.LoadingPanel

Loading Div

The Loading Div element is displayed above the ASPxHtmlEditor client region while data is loading to the view area (e.g., after the editor’s active tab is changed). The Loading Div element displays the loading panel inside it.

Loading Div

The table below lists the main members that affect element appearance and functionality.

Characteristics Members
Appearance HtmlEditorStyles.LoadingDiv

Dialogs

The built-in dialogs allow end-users to insert and modify hyperlinks, tables, media elements, etc. in the ASPxHtmlEditor.

VE_DialogForm

The table below lists the main members that affect element appearance and functionality.

Characteristics

Members

Dialog Form Elements’ Visibility

ASPxHtmlEditor.SettingsDialogs

Styles

ASPxHtmlEditor.StylesDialogForm,

ASPxHtmlEditor.StylesButton

Images

HtmlEditorImages.DialogFormCloseButton,

Context Menu

The Context Menu is activated by right-clicking within the editor’s design view area or html view area.

ASPxHtmlEditor-ContextMenu

The table below lists the main members that affect element appearance and functionality.

Characteristics Members
Availability ASPxHtmlEditorSettings.AllowContextMenu
Appearance ASPxHtmlEditor.StylesContextMenu