How to Override Keyboard Shortcuts in ASP.NET Core DOCX Editor

14 Aug 20264 minutes to read

The ASP.NET Core DOCX Editor (Document Editor) triggers the keyDown event every time a key is entered and provides an instance of DocumentEditorKeyDownEventArgs. You can use the isHandled property to override the keyboard shortcut behavior.

Preventing the default keyboard shortcut

The following code shows how to prevent the Ctrl + C keyboard shortcut for copying selected content in the Document Editor.

<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true id="container"></ejs-documenteditor>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container").ej2_instances[0];
        documentEditor.keyDown = function (args) {
            var keyCode = args.event.which || args.event.keyCode;
            var isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
            //67 is the character code for 'C'
            if (isCtrlKey && keyCode === 67) {
                //To prevent copy operation set isHandled to true
                args.isHandled = true;
            }
        }
    });
</script>

Override or define a keyboard shortcut

You can override or define a new keyboard shortcut behavior instead of preventing the keyboard shortcut.

For example, the Ctrl + S keyboard shortcut saves the document in SFDT format by default, and there is no behavior for Ctrl + Alt + S. The following code demonstrates how to override the Ctrl + S shortcut to save a document in DOCX format and define Ctrl + Alt + S to save the document in SFDT format.

<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableWordExport=true enableSfdtExport=true id="container"></ejs-documenteditor>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container").ej2_instances[0];
        documentEditor.keyDown = function (args) {
            var keyCode = args.event.which || args.event.keyCode;

            var isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);

            var isAltKey = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);

            // 83 is the character code for 'S'
            if (isCtrlKey && !isAltKey && keyCode === 83) {
                //To prevent default save operation, set the isHandled property to true
                args.isHandled = true;
                documentEditor.save('sample', 'Docx');
                args.event.preventDefault();
            } else if (isCtrlKey && isAltKey && keyCode === 83) {
                documentEditor.save('sample', 'Sfdt');
            }
        }
    });
</script>