Rich Edit - Context Menu

The contextMenu property allows you to customize the DevExpress ASP.NET Core Rich Text Editor's context menu. You can handle the contextMenuShowing event to additionally modify the menu before it is displayed.

In this demo, the contextMenu.items collection is customized on the Init event. The ContextMenuShowing event is handled to modify the collection based on the current selection.

Click on a custom menu item raises the CustomCommandExecuted event. The event handler identifies the clicked item by its name (the e.commandName property) and processes the item click (search the selected text in Google).

Backend API

<script src="~/DemosScripts/contextMenuCustomization.js"></script> @(Html.DevExpress().RichEdit("DemoRichEdit") .Open("Documents/ContextMenu.docx") .OnInit("onInit") .OnCustomCommandExecuted("onCustomCommandExecuted") .OnContextMenuShowing("onContextMenuShowing") .Height(600) .ConfirmOnLosingChanges(c => c.Enabled(false)) )

using Microsoft.AspNetCore.Mvc; namespace AspNetCoreDemos.RichEdit { [Route("[action]")] public class RichEditController : Controller { public IActionResult ContextMenuCustomization() { return View(); } } }

var customizedOnEventItemId = 'customizedOnEventId'; var googleSearchId = 'googleSearchId'; // icons: https://js.devexpress.com/Documentation/Guide/Themes_and_Styles/Icons/#Built-In_Icon_Library 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; } }