HTML Editor Elements
- 6 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.
Toolbar
Toolbars are displayed in the Bar Dock Container when the ASPxHtmlEditor.ToolbarMode property is set to Menu. Toolbars contain Toolbar Items, such as toolbar buttons and toolbar editors. ASPxHtmlEditor has a set of default toolbar items and allows you to create custom toolbar items.
Characteristics | Members |
|---|---|
Visibility | |
Toolbar Collection | |
Availability | |
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.
Use the ToolbarsStyles.Ribbon property to specify the style settings of ribbon elements.
Tabs
You can use the ASPxHtmlEditor.RibbonTabs property to customize the collection of ribbon tabs. 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 and allow users to perform various actions. For instance, a user can click the Undo button to cancel or reverse the last 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
Use the ASPxHtmlEditor.RibbonContextTabCategories property to customize the collection of ribbon context tab categories. A context tab category is a container for context tabs, which are hidden tabs that are displayed on demand (for example, 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 users to navigate through the tag hierarchy and remove tags. A user can click the Change Element button in the Tag Inspector to invoke the Change Element Properties dialog and customize tag properties.
The Tag Inspector is displayed when the design view area is active, if the ASPxHtmlEditorSettings.ShowTagInspector property is set to true.
The image below illustrates the Tag Inspector in detail.
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 users to modify the editor content with 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 enables users to use HTML markup to modify the editor content. The Html View Area is displayed in the view area when the HTML tab is active.
In the Preview Area, users can view the editor content as a regular webpage. The Preview Area is displayed in the view area when the Preview tab is active.
The table below lists the main members that affect element appearance and functionality.
Paste Options Bar
The Paste Options Bar allows users to change the pasted HTML content format. The bar appears in the top right corner of the design view area after content is pasted.
The ASPxHtmlEditorHtmlEditingSettings.EnablePasteOptions property specifies whether to display the Paste Options Bar:
False(default) - The control does not display the bar.True- The control displays the bar after a user pastes content.
Status Bar
The Status Bar is displayed at the bottom of the ASPxHtmlEditor control and contains tab and size grip elements.
Use the HTML Editor’s StylesStatusBar property to access style settings that affect element appearance.
Tab
Tabs are displayed in the status bar and allow users to switch between the editor’s view areas. The Active Tab corresponds to the currently displayed view area.
The table below lists the main members that affect element appearance and functionality.
Characteristics | Members |
|---|---|
Availability | ASPxHtmlEditorSettings.AllowDesignView, |
Tab Captions | ASPxHtmlEditorTextSettings.DesignViewTab, |
Appearance |
Size Grip
The Size Grip is displayed at the bottom right corner of the editor’s status bar, and allows users to resize the editor.
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 dialog elements while waiting for a callback response.
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 the editor loads data to the view area. For instance, the HTML Editor displays the Loading Div element after a user changes the active tab. The Loading Div element includes the loading panel.
Use the HTML Editor’s HtmlEditorStyles.LoadingDiv property to access style settings that affect element appearance.
Dialogs
The built-in dialogs allow users to insert and modify ASPxHtmlEditor content (for instance, hyperlinks, tables, media elements). The image below shows the Insert Link dialog.
The table below lists the main members that affect element appearance and functionality.
Characteristics | Members |
|---|---|
Dialog Form Element Visibility | |
Styles | |
Images |
Context Menu
Right-click within the editor’s Design view area or HTML view area to activate the Context Menu.
The table below lists the main members that affect element appearance and functionality.
| Characteristics | Members |
|---|---|
| Availability | ASPxHtmlEditorSettings.AllowContextMenu |
| Appearance | ASPxHtmlEditor.StylesContextMenu |