How to Customize Context Menu in JavaScript DOCX Editor

28 Aug 202612 minutes to read

How to customize context menu in DOCX Editor

JavaScript DOCX Editor (Document Editor) allows you to add custom options to the context menu. Use the addCustomMenu() method to add a custom option, and handle the selection with the customContextMenuSelect event.

Add custom option

The following code shows how to add custom option in context menu.

var documentEditor = new ej.documenteditor.DocumentEditor({
    isReadOnly: false,
    serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});
documentEditor.enableAllModules();
documentEditor.appendTo('#DocumentEditor');
//Creating custom menu items
var menuItems = [
    {
        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 = function (args) {
    var item = args.id;
    var id = documentEditor.element.id;
    switch (item) {
        case id + 'search_in_google':
            var searchContent = documentEditor.selection.text;
            if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
                window.open('http://google.com/search?q=' + searchContent);
            }
            break;
    }
};

Customize custom option in context menu

The DOCX Editor allows you to customize an added custom option and also to hide or show default context menu items.

Hide default context menu items

The following code shows how to replace the default context menu and add a custom option in the context menu.

var documentEditor = new ej.documenteditor.DocumentEditor({
    isReadOnly: false,
    serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});
documentEditor.enableAllModules();
documentEditor.appendTo('#DocumentEditor');
//Creating custom menu items
var menuItems = [
    {
        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 show or hide an added custom option in the context menu using the customContextMenuBeforeOpen event.

var documentEditor = new ej.documenteditor.DocumentEditor({
    isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});
documentEditor.enableAllModules();
documentEditor.appendTo('#DocumentEditor');
//Creating custom menu items
var menuItems = [
    {
        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 = function (args) {
    var search = document.getElementById(args.ids[0]);
    search.style.display = 'none';
    var searchContent = documentEditor.selection.text;
    if ((!documentEditor.selection.isEmpty) && (/\S/.test(searchContent))) {
        search.style.display = 'block';
    }
};
//To handle contextmenu select event
documentEditor.customContextMenuSelect = function (args) {
    var item = args.id;
    var id = documentEditor.element.id;
    switch (item) {
        case id + 'search_in_google':
            var searchContent = documentEditor.selection.text;
            if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
                window.open('http://google.com/search?q=' + searchContent);
            }
            break;
    }
};

The following is the output of the custom context menu with customization.

ej.documenteditor.Editor,ej.documenteditor.Selection,ej.documenteditor.OptionsPane, ej.documenteditor.Search, ej.documenteditor.ContextMenu, ej.documenteditor.EditorHistory,ej.documenteditor.ImageResizer, ej.documenteditor.ListDialog,ej.documenteditor.TableDialog, ej.documenteditor.HyperlinkDialog, ej.documenteditor.ParagraphDialog, ej.documenteditor.FontDialog, ej.documenteditor.PageSetupDialog, ej.documenteditor.BookmarkDialog, ej.documenteditor.StyleDialog, ej.documenteditor.TablePropertiesDialog, ej.documenteditor.BordersAndShadingDialog, ej.documenteditor.TableOptionsDialog, ej.documenteditor.CellOptionsDialog, ej.documenteditor.TableOfContentsDialog

var defaultCheckBoxObj = new  ej.buttons.CheckBox({ label: 'Hide Default Context Menu', change: contextmenuHelper });
defaultCheckBoxObj.appendTo('#default-context-menu');
var positionCheckBoxObj = new  ej.buttons.CheckBox({ label: 'Add Custom option at bottom', change: contextmenuHelper });
positionCheckBoxObj.appendTo('#position-context-menu');

var editor = new ej.documenteditor.DocumentEditor({
    isReadOnly: false,
    height: '370px',
    serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});
editor.enableAllModules();
editor.appendTo('#DocumentEditor');


// Creating custom menu items
var menuItems = [
    {
        text: 'Search In Google',
        id: 'search_in_google',
        iconCss: 'e-icons e-de-ctnr-find'
    }];
// Adding custom options
editor.contextMenu.addCustomMenu(menuItems, false);
// To show/hide custom menu item
editor.customContextMenuBeforeOpen = function(args) {
    var search = document.getElementById(args.ids[0]);
    search.style.display = 'none';
    var searchContent = editor.selection.text;
    if ((!editor.selection.isEmpty) && (/\S/.test(searchContent))) {
        search.style.display = 'block';
    }
}
// To handle contextmenu select event
editor.customContextMenuSelect = function(args) {
    var item = args.id;
    var id = editor.element.id;
    switch (item) {
        case id + 'search_in_google':
            var searchContent = editor.selection.text;
            if (!editor.selection.isEmpty && /\S/.test(searchContent)) {
                window.open('http://google.com/search?q=' + searchContent);
            }
            break;
    }
}
function contextmenuHelper(args) {
    editor.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://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <input id="default-context-menu" type="checkbox">
    <input id="position-context-menu" type="checkbox">
    <div id="container">         
        <div id="DocumentEditor">           
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</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 inside a custom context menu option in the Document Editor container.

// creating Custom Options
var menuItems = [
  {
    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.
var container = new ej.documenteditor.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 (ES5) DOCX Editor for working with Word documents in this live demo here.