JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Customize context menu in JavaScript (ES5) DocumentEditor control

08 May 2023 / 3 minutes to read

How to customize context menu in Document Editor

Document Editor allows you to add custom option in context menu. It can be achieved by using the addCustomMenu() method and custom action is defined using the customContextMenuSelect

Add Custom Option

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

Copied to clipboard
let documentEditor: DocumentEditor = new DocumentEditor({
    isReadOnly: false
});
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('http://google.com/search?q=' + searchContent);
            }
            break;
    }
};

Customize custom option in context menu

Document Editor allows you to customize the added custom option and also to hide/show default context menu.

Hide default context menu items

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

Copied to clipboard
let documentEditor: DocumentEditor = new DocumentEditor({
    isReadOnly: false
});
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 added custom option in context menu using the customContextMenuBeforeOpen.

Copied to clipboard
let documentEditor: DocumentEditor = new DocumentEditor({
    isReadOnly: false
});
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('http://google.com/search?q=' + searchContent);
            }
            break;
    }
};

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

Source
Preview
index.js
index.html
Copied to clipboard
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
});
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);
}
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/21.2.3/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/fabric.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/fabric.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/fabric.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/fabric.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/fabric.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/fabric.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/fabric.css" rel="stylesheet"> 
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.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>
Previous
Next