Context Menu

• Jan 18, 2022
• 4 minutes to read

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

The context menu contains a collection of items (HtmlEditorContextMenuItem objects). To access the collection, use the ASPxHtmlEditor.ContextMenuItems property. The collection is an HtmlEditorContextMenuItemCollection class instance that has methods and properties 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.

Note

You can invoke a context menu only in the editor’s Design View and HTML View.

Default Context Menu Items

A context menu contains the following items:

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

Note

Some browsers (for example, 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 members of 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#
• JS
• ASPX

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"));
     }
}

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);
}

<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.