Search results

Customize context menu in ASP.NET MVC DocumentEditor control

20 Jan 2022 / 1 minute 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.

razor
Copied to clipboard
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        documenteditor = container.documentEditor;
        // creating Custom Options
        let menuItems = [
            {
                text: 'Search In Google',
                id: 'search_in_google',
                iconCss: 'e-icons e-de-ctnr-find',
            },
        ];
        // adding Custom Options
        container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
        // custom Options Select Event
        container.documentEditor.customContextMenuSelect = function (args) {
            // custom Options Functionality
            let id = container.documentEditor.element.id;
            switch (args.id) {
                case id + 'search_in_google':
                    // To get the selected content as plain text
                    let searchContent =
                        container.documentEditor.selection.text;
                    if (
                        !container.documentEditor.selection.isEmpty &&
                        /\S/.test(searchContent)
                    ) {
                        window.open('http://google.com/search?q=' + searchContent);
                    }
                    break;
            }
        };
    }
</script>

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

Using addCustomMenu() method, you can hide the default context menu. By setting second parameter as true.

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

razor
Copied to clipboard
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        documenteditor = container.documentEditor;
        // creating Custom Options
        let menuItems = [
            {
                text: 'Search In Google',
                id: 'search_in_google',
                iconCss: 'e-icons e-de-ctnr-find',
            },
        ];
        // The second parameter "true" hide the default context menu
        container.documentEditor.contextMenu.addCustomMenu(menuItems, true);
    }
</script>

Customize added context menu items

The following code shows how to hide/show added custom option in context menu using the customContextMenuBeforeOpen.

razor
Copied to clipboard
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        documenteditor = container.documentEditor;
        // creating Custom Options
        let menuItems = [
            {
                text: 'Search In Google',
                id: 'search_in_google',
                iconCss: 'e-icons e-de-ctnr-find',
            },
        ];
        // adding Custom Options
        container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
        // custom Options Select Event
        container.documentEditor.customContextMenuSelect = function (args) {
            // custom Options Functionality
            let id = container.documentEditor.element.id;
            switch (args.id) {
                case id + 'search_in_google':
                    // To get the selected content as plain text
                    let searchContent =
                        container.documentEditor.selection.text;
                    if (
                        !container.documentEditor.selection.isEmpty &&
                        /\S/.test(searchContent)
                    ) {
                        window.open('http://google.com/search?q=' + searchContent);
                    }
                    break;
            }
        };
        //  custom options hide/show functionality
        container.documentEditor.customContextMenuBeforeOpen = function (args) {
            let search = document.getElementById(args.ids[0]);
            search.style.display = 'none';
            let searchContent = container.documentEditor.selection.text;
            if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
                search.style.display = 'block';
            }
        };
    }
</script>