All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.

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

Related member: OnCustomCommandExecuted(String)

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

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.

Related member: OnContextMenuShowing(String)

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

Related member: Enabled(Boolean)

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