Context Menu Customization

• Aug 08, 2024
• 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.

JS

const options = DevExpress.RichEdit.createOptions();
var contextMenu = options.contextMenu;
// runtime customization
// var contextMenu = richEdit.contextMenu;

// remove default items
contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.DecreaseParagraphIndent);
contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.IncreaseParagraphIndent);
// 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.

.NET Core Server Settings

@(Html.DevExpress().RichEdit("richEdit")
   .OnCustomCommandExecuted("function(s,e){
        switch (e.commandName) {
            case 'googleSearch':
                var selectedText = s.selection.activeSubDocument.getText(s.selection.intervals[0]);
                window.open("https://www.google.com/search?q=" + selectedText, "_blank");
                break;
        }
    }")

Client Settings

const options = DevExpress.RichEdit.createOptions();
options.events.customCommandExecuted = ("function(s,e){
    switch (e.commandName) {
        case 'googleSearch':
            var selectedText = s.selection.activeSubDocument.getText(s.selection.intervals[0]);
            window.open("https://www.google.com/search?q=" + selectedText, "_blank");
            break;
    }
}");

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.

.NET Core Server Settings

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

Client Settings

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

Note

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.

.NET Core Server Settings

@(Html.DevExpress().RichEdit("richEdit")
    .ContextMenu(cm => cm
        .Enabled(false)
    )
)

Client Settings

const options = DevExpress.RichEdit.createOptions();
options.contextMenu.enabled = false;

Runtime Settings

richEdit.contextMenu.enabled = false;

ContextMenuShowing Event

const options = DevExpress.RichEdit.createOptions();
options.events.contextMenuShowing = ("function(s,e){
    e.contextMenu.enabled = false;
}");