The Bootstrap Rich Text Editor enables you to customize its context menu. By handling the PopupMenuShowing client-side event, you can perform the following actions with the Rich Text Editor's context menu
- Manipulate menu items - add new items, remove or disable existing ones (use the
e.menuItems property);
- Prevent the context menu from being displayed (use the
e.cancel property).
In this demo, the PopupMenuShowing event is handled to illustrate the context menu customization capabilities. Using check boxes, you can switch the context menu availability (via e.cancel) and control whether to clear or retain the default menu items when populating the menu with custom items (via e.menuItems). The custom items are implemented as BootstrapClientRichEditPopupMenuItem objects by their name property. Clicks on custom menu items are processed using the CustomCommandExecuted client event. Its handler identifies the activated item by its name and performs the corresponding action on the client-side. In this demo, custom menu items create the Date and Time fields (using the createDateField and createTimeField client commands) and search the selected text in Google (the selected text is received via the client API).
<dx:BootstrapRichEdit runat="server" ActiveTabIndex="0"
ShowConfirmOnLosingChanges="false">
<ClientSideEvents
PopupMenuShowing="function(s, e) { RichEditPopupMenuShowing(s, e); }"
CustomCommandExecuted="function(s, e) { RichEditCustomCommandExecuted(s, e); }">
</ClientSideEvents>
</dx:BootstrapRichEdit>
function RichEditPopupMenuShowing(s, e) {
e.menuItems.Clear();
var insertDateItem = new ASPxClientRichEditPopupMenuItem();
insertDateItem.name = "addDate";
insertDateItem.text = "Insert the Current Date";
e.menuItems.Insert(0, insertDateItem);
var insertTimeItem = new ASPxClientRichEditPopupMenuItem();
insertTimeItem.name = "addTime";
insertTimeItem.text = "Insert the Current Time";
e.menuItems.Insert(1, insertTimeItem);
var googleSearchItem = new ASPxClientRichEditPopupMenuItem();
googleSearchItem.name = "googleSearch";
googleSearchItem.text = "Google Search...";
googleSearchItem.imageClassName = "fa fa-search";
googleSearchItem.beginGroup = true;
e.menuItems.Insert(2, googleSearchItem);
}
function RichEditCustomCommandExecuted(s, e) {
switch(e.commandName) {
case "googleSearch":
var selectedInterval = s.selection.intervals[0];
var selectedText = s.document.activeSubDocument.text.substr(selectedInterval.start,
selectedInterval.length);
window.open("https://www.google.com/search?q=" + selectedText, "_blank");
break;
case "addDate":
s.commands.createDateField.execute();
break;
case "addTime":
s.commands.createTimeField.execute();
break;
}
}