Skip to main content
All docs
V25.1
  • JS

    RichEditBuilder.OnContextMenuShowing(String) Method

    Assigns an event handler to the ContextMenuShowing event.

    Namespace: DevExpress.AspNetCore.RichEdit

    Assembly: DevExpress.AspNetCore.RichEdit.v25.1.dll

    NuGet Package: DevExpress.AspNetCore.RichEdit

    Declaration

    public RichEditBuilder OnContextMenuShowing(
        string callback
    )

    Parameters

    Name Type Description
    callback String

    The name of the JavaScript function or the JavaScript function code used to handle the event.

    Returns

    Type Description
    RichEditBuilder

    The builder for the Rich Text Editor.

    Remarks

    The ContextMenuShowing event occurs before the context menu is shown and allows you to customize the menu. The event handler receives an argument of the ContextMenuShowingEventArgs type. The argument’s properties provide information specific to this event.

    @(Html.DevExpress().RichEdit("richEdit")
       .OnInit("onInit")
       .OnCustomCommandExecuted("onCustomCommandExecuted")
       .OnContextMenuShowing("onContextMenuShowing")
       // ...
    )
    
    var customizedOnEventItemId = 'customizedOnEventId';
    var googleSearchId = 'googleSearchId';
    
    function onInit(s) {
        s.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem(customizedOnEventItemId, {
            icon: 'coffee', beginGroup: true, text: 'Customized on event', visible: false, disabled: true
        }), 0);
        s.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem(googleSearchId, {
            icon: 'search', beginGroup: true, text: 'Google Search...'
        }), 1);
        s.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.DecreaseParagraphIndent);
        s.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.IncreaseParagraphIndent);
        s.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem(DevExpress.RichEdit.MailMergeTabCommandId.CreateDateField, {
            icon: 'clock', text: 'Insert Date Field'
        }), 1);
    }
    function onContextMenuShowing(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.getItem(customizedOnEventItemId).visible = true;
            e.contextMenu.items[0].beginGroup = true;
            e.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem('CutCopy', {
                icon: 'close', text: 'Copy Paste Disabled', disabled: true
            }), 1);
        }
    };
    function onCustomCommandExecuted(s, e) {
        switch (e.commandName) {
            case googleSearchId:
                var selectedText = s.selection.activeSubDocument.getText(s.selection.intervals[0]);
                window.open("https://www.google.com/search?q=" + selectedText, "_blank");
                break;
        }
    }
    

    Run Demo: Context Menu Customization

    See Also