How to Customize Context Menu in TypeScript DOCX Editor
2 Sep 202612 minutes to read
How to customize the context menu in the DOCX Editor
TypeScript DOCX Editor (Document Editor) allows you to add a custom option to the context menu. It can be achieved by using the addCustomMenu() method, and the custom action is defined using the customContextMenuSelect.
Add Custom Option
The following code shows how to add a custom option to the context menu.
let documentEditor: DocumentEditor = new DocumentEditor({
isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});
documentEditor.enableAllModules();
documentEditor.appendTo('#DocumentEditor');
//Creating custom menu items
let menuItems: MenuItemModel[] = [
{
text: 'Search In Google',
id: 'search_in_google',
iconCss: 'e-icons e-de-ctnr-find'
}];
//Adding custom options
documentEditor.contextMenu.addCustomMenu(menuItems, false);
//To handle contextmenu select event
documentEditor.customContextMenuSelect = (args: CustomContentMenuEventArgs): void => {
let item: string = args.id;
let id: string = documentEditor.element.id;
switch (item) {
case id + 'search_in_google':
let searchContent: string = documentEditor.selection.text;
if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
window.open('https://google.com/search?q=' + searchContent);
}
break;
}
};Customize custom option in the context menu
The DOCX Editor allows you to customize the added custom option and also to hide/show the default context menu.
Hide default context menu items
The following code shows how to hide the default context menu and add a custom option to the context menu.
let documentEditor: DocumentEditor = new DocumentEditor({
isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});
documentEditor.enableAllModules();
documentEditor.appendTo('#DocumentEditor');
//Creating custom menu items
let menuItems: MenuItemModel[] = [
{
text: 'Search In Google',
id: 'search_in_google',
iconCss: 'e-icons e-de-ctnr-find'
}];
//Adding custom options
documentEditor.contextMenu.addCustomMenu(menuItems, true);Customize added context menu items
The following code shows how to hide/show the added custom option in the context menu using the customContextMenuBeforeOpen.
let documentEditor: DocumentEditor = new DocumentEditor({
isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});
documentEditor.enableAllModules();
documentEditor.appendTo('#DocumentEditor');
//Creating custom menu items
let menuItems: MenuItemModel[] = [
{
text: 'Search In Google',
id: 'search_in_google',
iconCss: 'e-icons e-de-ctnr-find'
}];
//Adding custom options
documentEditor.contextMenu.addCustomMenu(menuItems, false);
//To show/hide custom menu item
documentEditor.customContextMenuBeforeOpen = (args: BeforeOpenCloseCustomContentMenuEventArgs): void => {
let search: HTMLElement = document.getElementById(args.ids[0]);
search.style.display = 'none';
let searchContent: string = documentEditor.selection.text;
if ((!documentEditor.selection.isEmpty) && (/\S/.test(searchContent))) {
search.style.display = 'block';
}
};
//To handle contextmenu select event
documentEditor.customContextMenuSelect = (args: CustomContentMenuEventArgs): void => {
let item: string = args.id;
let id: string = documentEditor.element.id;
switch (item) {
case id + 'search_in_google':
let searchContent: string = documentEditor.selection.text;
if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
window.open('https://google.com/search?q=' + searchContent);
}
break;
}
};The following is the output of the custom context menu with customization.
import { DocumentEditor, Editor, Selection, OptionsPane, Search, ContextMenu, EditorHistory, ImageResizer, ListDialog, TableDialog, HyperlinkDialog, ParagraphDialog, FontDialog, PageSetupDialog, BookmarkDialog, StyleDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, TableOfContentsDialog } from '@syncfusion/ej2-documenteditor';
import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
let defaultCheckBoxObj: CheckBox = new CheckBox({ label: 'Hide Default Context Menu', change: contextmenuHelper });
defaultCheckBoxObj.appendTo('#default-context-menu');
let positionCheckBoxObj: CheckBox = new CheckBox({ label: 'Add Custom option at bottom', change: contextmenuHelper });
positionCheckBoxObj.appendTo('#position-context-menu');
//Initialize Document Editor component.
let documentEditor: DocumentEditor = new DocumentEditor({
isReadOnly: false, height: '370px', serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});
//Enable all built in modules.
documentEditor.enableAllModules();
//Render Document Editor component.
documentEditor.appendTo('#DocumentEditor');
//Creating custom menu items
let menuItems: MenuItemModel[] = [
{
text: 'Search In Google',
id: 'search_in_google',
iconCss: 'e-icons e-de-ctnr-find'
}];
//Adding custom options
documentEditor.contextMenu.addCustomMenu(menuItems, false);
//To show/hide custom menu item
documentEditor.customContextMenuBeforeOpen = (args: BeforeOpenCloseCustomContentMenuEventArgs): void => {
let search: HTMLElement = document.getElementById(args.ids[0]);
search.style.display = 'none';
let searchContent: string = documentEditor.selection.text;
if ((!documentEditor.selection.isEmpty) && (/\S/.test(searchContent))) {
search.style.display = 'block';
}
};
//To handle contextmenu select event
documentEditor.customContextMenuSelect = (args: CustomContentMenuEventArgs): void => {
let item: string = args.id;
let id: string = documentEditor.element.id;
switch (item) {
case id + 'search_in_google':
let searchContent: string = documentEditor.selection.text;
if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
window.open('http://google.com/search?q=' + searchContent);
}
break;
}
};
//function to handle the CheckBox change event
function contextmenuHelper(args: ChangeEventArgs): void {
documentEditor.contextMenu.addCustomMenu(menuItems, defaultCheckBoxObj.checked, positionCheckBoxObj.checked);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<input id="default-context-menu" type="checkbox" />
<input id="position-context-menu" type="checkbox" />
<div id='container'>
<div id='DocumentEditor'>
</div>
</div>
</body>
</html>Customize Context Menu with sub-menu items
The DOCX Editor allows you to customize the context menu with sub-menu items. It can be achieved by using the addCustomMenu() method.
The following code shows how to add sub-items to the custom option in the context menu in the Document Editor Container.
import {
DocumentEditorContainer,
Toolbar,
} from '@syncfusion/ej2-documenteditor';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
//Inject required modules.
DocumentEditorContainer.Inject(Toolbar);
//Creating custom options
let menuItems: MenuItemModel[] = [
{
text: 'Form field',
id: 'form field',
iconCss: 'e-de-formfield e-icons',
items: [
{
text: 'Text form',
id: 'Text form',
iconCss: 'e-icons e-de-textform',
},
{
text: 'Check box',
id: 'Check box',
iconCss: 'e-icons e-de-checkbox-form',
},
{
text: 'Drop down',
id: 'Drop down',
iconCss: 'e-icons e-de-dropdownform',
},
],
},
];
//Initialize Document Editor component.
let container: DocumentEditorContainer = new DocumentEditorContainer({
enableToolbar: true,
height: '590px',
});
//Open the default document in `created` event.
container.created = function () {
//Adding custom options
container.documentEditor.contextMenu.addCustomMenu(menuItems, false, true);
};
//Render Document Editor Container component.
container.appendTo('#DocumentEditor');Online Demo
Explore how to customize the context menu in the JavaScript DOCX Editor for working with Word documents in this live demo here.