Context Menu

• Aug 01, 2019
• 4 minutes to read

A context menu is a popup menu displayed when an end-user right-clicks the content (text, image, table, etc.) within the editor.

The context menu items (HtmlEditorContextMenuItem objects) are maintained in the ASPxHtmlEditor.ContextMenuItems collection, which is represented by the HtmlEditorContextMenuItemCollection class. You can use the methods and properties provided by this class to access and manipulate (add or delete) menu items.

The ASPxHtmlEditorSettings.AllowContextMenu property allows you to specify the type and availability of the context menu.

The AllowContextMenu property value	The corresponding menu type
True	An HTML Editor menu that provides common (Cut, Copy, Paste, and Select All) and context-specific (Modify Table, Change Image, etc.) operations.
Default	A browser’s context menu (for IE, Chrome, etc.) that provides commands specific to a particular browser.
False	A context menu is not shown.

Note

A context menu can be invoked only in the editor’s Design view and Html view.

Default Context Menu Items

By default, a context menu contains the following items.

Item	Description
Items available in Design view
Cut	Cuts the selection to the clipboard. (See the note below the table)
Copy	Copies the selection to the clipboard. (See the note below the table)
Paste	Pastes content from the clipboard to the current cursor position. (See the note below the table)
Select All	Selects all editor content.
Unlink	Removes the current link element.
Change Link	Invokes the Change Link dialog for the current link.
Change Image	Invokes the Change Image dialog for the current image.
Change Audio	Invokes the Change Audio dialog for the current audio element.
Change Video	Invokes the Change Video dialog for the current video element.
Change Flash	Invokes the Change Flash dialog for the current flash element.
Change YouTube Video	Invokes the Change YouTube Video dialog for the current YouTube video element.
Change Placeholder	Invokes the Change Placeholder dialog for the current placeholder.
Table Properties	Invokes the Table Properties dialog for the current table.
Row Properties	Invokes the Row Properties dialog for the current row.
Column Properties	Invokes the Column Properties dialog for the current column.
Cell Properties	Invokes the Cell Properties dialog for the current cell.
Insert Table	Insert a new table
Insert Row Above	Inserts a table row above the current one.
Insert Row Below	Inserts a table row below the current one.
Insert Column to the Left	Inserts a table column to the left of the current one.
Insert Column to the Right	Inserts a table column to the right of the current one.
Split Horizontally	Splits the current cell horizontally into two cells.
Split Vertically	Splits the current cell vertically into two cells.
Merge Right	Merges the current table cell with the right one.
Merge Down	Merges the current table cell with the bottom one.
Delete Table	Deletes the current table.
Delete Row	Deletes the current table row.
Delete Column	Deletes the current table column.
Items available in HTML view
Outdent	Decrease an indent for the current paragraph.
Indent	Increase an indent for the current paragraph.
Comment	Comments the selected code lines.
Uncomment	Uncomments the selected HTML.
Format Document	Formats the HTML document.
Collapse Tag	Collapses the current tag.
Expand Tag	Expands the current tag.

Default item visibility is switched based on the currently selected element.

Note

Some browsers (e.g., Firefox, Chrome) do not allow scripts to work with the clipboard for security reasons. Therefore, the Cut, Copy, and Paste items are removed from the context menu for these browsers.

Context Menu Runtime Customization

ASPxHtmlEditor allows you to customize default content menu items and create custom items. To modify an item collection, use the members provided by the HtmlEditorContextMenuItemCollection class.

The code sample below demonstrates how you can handle the ASPxClientHtmlEditor.ContextMenuShowing event to change the content of a context menu (by changing its items visibility).

C#

protected void Page_Load(object sender, EventArgs e) {
     if (!IsPostBack) {
          MyHtmlEditor.ContextMenuItems.CreateDefaultItems();
          MyHtmlEditor.ContextMenuItems.Insert(0, new HtmlEditorContextMenuItem("Add Title...", "AddTitle"));
          MyHtmlEditor.ContextMenuItems.Insert(1, new HtmlEditorContextMenuItem("Change Title...", "ChangeTitle"));
          MyHtmlEditor.ContextMenuItems.Insert(2, new HtmlEditorContextMenuItem("Remove Title", "RemoveTitle"));
     }
}

JS

function OnContextMenuShowing(s, e) {
     var contextMenu = s.GetContextMenu();
     var selectedElement = myHtmlEditor.GetSelection().GetSelectedElement();
     var isImageSelected = selectedElement && selectedElement.tagName.toLowerCase() == "img";

     SetContextMenuItemVisible(contextMenu, "AddTitle", isImageSelected && !selectedElement.title);
     SetContextMenuItemVisible(contextMenu, "ChangeTitle", isImageSelected && selectedElement.title);
     SetContextMenuItemVisible(contextMenu, "RemoveTitle", isImageSelected && selectedElement.title);
}

function SetContextMenuItemVisible(contextMenu, itemName, visible) {
     var item = contextMenu.GetItemByName(itemName);
     if(item)
          item.SetVisible(visible);
}

ASPX

<dx:ASPxHtmlEditor ID="DemoHtmlEditor" runat="server" ClientInstanceName="myHtmlEditor">
     <ClientSideEvents ContextMenuShowing="OnContextMenuShowing"

     ...

</dx:ASPxHtmlEditor>

Note that if you create custom context menu items within ASPxHtmlEditor, default items are not created automatically. To manually populate a context menu with default items, call the HtmlEditorContextMenuItemCollection.CreateDefaultItems method.

Context Menu Design-time Customization

You can customize a context menu item collection at design time using the ASPxHtmlEditor Designer or directly in markup.