Skip to main content

Context Menu Customization

  • 3 minutes to read

Rich Text Editor’s context menu contains a set of default commands. This topic demonstrates how you can rearrange or delete the default commands, add custom commands, update the menu dynamically, or disable it.

Run Demo: Context Menu Customization

Use the Options.contextMenu or RichEdit.contextMenu property to access the Rich Text Editor context menu. The ContextMenu.items property exposes the following methods to customize the menu item collection.

Method Description
insertItem(item) Inserts an item at the specified position.
insertItemAfter(item, target) Inserts an item after the specified item.
insertItemBefore(item, target) Inserts an item before the specified item.
removeItem(item) Removes an item from the context menu.
removeItem(id) Removes an item with the specified identifier from the context menu.
const options = DevExpress.RichEdit.createOptions();
var contextMenu = options.contextMenu;
// runtime customization
// var contextMenu = richEdit.contextMenu;

// remove default items
// add an item that performs a default command
contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem(
    DevExpress.RichEdit.MailMergeTabCommandId.CreateDateField, {
    icon: 'clock', text: 'Insert Date Field'
}), 1);
// add a custom item
contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem('googleSearch', {
    icon: 'search', beginGroup: true, text: 'Google Search...'
}), 1);

To process a custom item click, handle the CustomCommandExecuted event. The commandName event parameter returns the processed item’s id property value.

        switch (e.commandName) {
            case 'googleSearch':
                var selectedText = s.selection.activeSubDocument.getText(s.selection.intervals[0]);
      "" + selectedText, "_blank");

Dynamic Customization

The ContextMenuShowing event occurs before the context menu is displayed. You can handle the event to modify the menu based on the current selection. The contextMenu event parameter returns an object that contains context menu settings. You can modify this object with the methods described above.

        var characterProperties = s.selection.activeSubDocument.getCharacterProperties(s.selection.intervals[0]);
        if (characterProperties.bold === true || characterProperties.bold === undefined) {
            e.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem('CutCopy', {
                icon: 'close', text: 'Copy Paste Disabled', disabled: true
            }), 1);


Changes made in the ContextMenuShowing event do not affect the initial context menu settings.

Disable the Context Menu

Set the contextMenu.enabled property to false to disable the context menu.

    .ContextMenu(cm => cm