Skip to main content
All docs
V25.1
  • DevExpress v25.1 Update — Your Feedback Matters

    Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

    Take the survey Not interested

    DxRichEdit.CustomizeContextMenu Event

    Allows you to customize the context menu in the Rich Text Editor.

    Namespace: DevExpress.Blazor.RichEdit

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

    NuGet Package: DevExpress.Blazor.RichEdit

    #Declaration

    C#
    [Parameter]
    public EventCallback<IContextMenuItemCollection> CustomizeContextMenu { get; set; }

    #Parameters

    Type Description
    IContextMenuItemCollection

    The item collection. Requires the DevExpress.Blazor.Office namespace.

    #Remarks

    The CustomizeContextMenu event allows you to access and customize the context menu in the Rich Text Editor. You can customize or remove existing commands or add root-level and nested menu items.

    customize-contextmenu-items

    Run Demo: Context Menu Customization

    #Access Item Collections

    #Access Root-Level Items

    The CustomizeContextMenu event’s parameter allows you to access the item collection of the built-in context menu. You can obtain an item by its name or index:

    Razor
    <DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />
    
    @code {
        void OnCustomizeContextMenu(IContextMenuItemCollection items) {
            // Returns the first item
            IContextMenuItem firstItem = items[0];
            // Returns the "Increase Indent" item
            IContextMenuItem increaseIndentItem = items[RichEditContextMenuItemNames.IncreaseIndent];
        }
    }
    

    #Access Nested Items

    Use the Items property to access the item collection for an individual item. You can obtain an item by its name or index:

    Razor
    <DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />
    
    @code {
        void OnCustomizeContextMenu(IContextMenuItemCollection items) {
            IContextMenuItem textWrapMenu = items[RichEditContextMenuItemNames.TextWrapMenu];
            // Returns the first item in the "Text Wrap Menu"
            IContextMenuItem firstItem = textWrapMenu.Items[0];
            // Returns the "Text Wrap Inline" item
            IContextMenuItem wrapInlineItem = textWrapMenu.Items[RichEditContextMenuItemNames.TextWrapInline];
        }
    }
    

    #Access All Items

    Call the Flatten() method to recursively iterate through item collections and collect all root-level and nested items.

    The following code snippet removes icons for all items in the context menu (including sub-menus):

    Razor
    <DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu/>
    
    @code {
        void OnCustomizeContextMenu(IContextMenuItemCollection items) {
            foreach (var item in items.Flatten()) {
                item.IconUrl = string.Empty;
            }
        }
    }
    

    #Add Items

    #Add Default Items

    Add method overloads allow you to add a default item with the specified name to the item collection. The RichEditContextMenuItemNames class contains names of all built-in items. Use properties of this class to obtain default item names. Refer to the following section for a list of available root-level and nested items: Built-in Context Menu Items.

    Razor
    <DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />
    
    @code {
        void OnCustomizeContextMenu(IContextMenuItemCollection items) {
            // Inserts the "Bring to Front" item at the end of the item collection
            items.Add(RichEditContextMenuItemNames.BringToFront);
            // Inserts the "Bring in Front of Text" item at the first position in the item collection
            items.Add(0, RichEditContextMenuItemNames.BringInFrontOfText);
            var clipboardItem = items.AddCustomItem(0, "Clipboard");
            clipboardItem.BeginGroup = true;
            // Adds default items to the item collection of the inserted item
            clipboardItem.Items.Add(RichEditContextMenuItemNames.CutSelection);
            clipboardItem.Items.Add(RichEditContextMenuItemNames.CopySelection);
            clipboardItem.Items.Add(RichEditContextMenuItemNames.Paste);
        }
    }
    

    #Add Custom Items

    AddCustomItem method overloads allow you to create a custom item and add it to the item collection.

    Razor
    <DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />
    
    @code {
        void OnCustomizeContextMenu(IContextMenuItemCollection items) {
            // Inserts a custom item at the first position in the item collection
            var searchItem = items.AddCustomItem(0, "Google Search...", ...);
            var openHyperlinkItem = items[RichEditContextMenuItemNames.OpenHyperlink];
            openHyperlinkItem.BeginGroup = false;
            var index = items.IndexOf(openHyperlinkItem);
            // Inserts a custom item at the specified position in the item collection
            var showURLItem = items.AddCustomItem(index, "Show URL", ...);
            showURLItem.BeginGroup = true;
            // Inserts a custom item at the second position in the item collection
            var clipboardItem = items.AddCustomItem(1, "Clipboard");
        }
    }
    

    #Remove Items

    Remove method overloads allow you to remove an item with the specified name or index from the item collection. To remove all items from the collection, call the Clear() method.

    Razor
    <DxRichEdit CustomizeContextMenu="OnCustomizeContextMenu"/>
    
    @code {
        void OnCustomizeContextMenu(IContextMenuItemCollection items) {
            // Removes the first item
            items.Remove(0);
            // Removes the "Decrease Indent" item
            items.Remove(RichEditContextMenuItemNames.DecreaseIndent);
            // Removes all items
            items.Clear();
        }
    }
    

    #Customize Items

    Access an item and use its properties to customize availability, appearance, and behavior.

    <DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />
    
    @code {
        Selection selection;
        string textToSearch;
        async Task OnCustomizeContextMenu(IContextMenuItemCollection items) {
            if (selection.Intervals[0].Length > 0) {
                var span = await selection.ActiveSubDocument.GetTextSpanAsync(selection.Intervals[0]);
                textToSearch = span.Text.Trim();
            }
            else
                textToSearch = null;
            var searchItem = items.AddCustomItem(0, "Google Search...", async () => {
                var url = $"https://www.google.com/search?q={HttpUtility.UrlEncode(textToSearch)}";
                await JSRuntime.InvokeVoidAsync("open", url, "_blank");
            });
            searchItem.Enabled = !string.IsNullOrEmpty(textToSearch);
            searchItem.IconCssClass = "search-icon";
            // ...
        }
    }
    

    #Built-in Context Menu Items

    The table below lists built-in context menu items that contain nested items.

    Root-Level Item Nested Item
    SpellingMenu Suggestion
    NoSuggestions
    IgnoreMisspelling
    IgnoreAllMisspellings
    AddToDictionary
    BringForwardMenu BringForward
    BringInFrontOfText
    BringToFront
    SendBackwardMenu SendBackward
    SendBehindText
    SendToBack
    TextWrapMenu TextWrapBehindText
    TextWrapInFrontOfText
    TextWrapInline
    TextWrapSquare
    TextWrapThrough
    TextWrapTight
    TextWrapTopAndBottom
    InsertTableElementsMenu InsertTableColumnToTheLeft
    InsertTableColumnToTheRight
    InsertTableRowAbove
    InsertTableRowBelow
    ShowInsertCellsDialog
    TableCellAlignmentMenu TableCellAlignBottomCenter
    TableCellAlignBottomLeft
    TableCellAlignBottomRight
    TableCellAlignMiddleCenter
    TableCellAlignMiddleLeft
    TableCellAlignTopCenter
    TableCellAlignTopLeft
    TableCellAlignTopRight

    The built-in context menu also contains the following items on the root level:

    See Also