Override the Keyboard Shortcuts in Vue Document Editor Component
Document Editor triggers the keyDown
event every time when any key is entered and provides an instance of DocumentEditorKeyDownEventArgs
. You can use the isHandled
property to override the keyboard shortcut behavior.
Preventing default keyboard shortcut
The following code shows how to prevent the CTRL + C
keyboard shortcut for copying selected content in Document Editor.
<template>
<div style="height:330px">
<ejs-documenteditor ref="documenteditor" :height="height" style="width: 100%;display:block" :isReadOnly='false'
:enableSelection='true' :enableSfdtExport='true' :enableEditor='true'
v-bind:keyDown='onKeyDown'></ejs-documenteditor>
</div>
</template>
<script setup>
import { provide } from "vue";
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
const height = '370px';
provide('DocumentEditor ', [SfdtExport, Selection, Editor]);
const onKeyDown = function (args) {
let keyCode = args.event.which || args.event.keyCode;
let 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>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
<div style="height:330px">
<ejs-documenteditor ref="documenteditor" :height="height" style="width: 100%;display:block" :isReadOnly='false'
:enableSelection='true' :enableSfdtExport='true' :enableEditor='true'
v-bind:keyDown='onKeyDown'></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
name: "App",
components: {
"ejs-documenteditor": DocumentEditorComponent
},
data: function () {
return {
height: '370px'
};
},
provide: {
DocumentEditor: [SfdtExport, Selection, Editor]
},
methods: {
onKeyDown: function (args) {
let keyCode = args.event.which || args.event.keyCode;
let 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>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
Override or define the keyboard shortcut
Override or define a new keyboard shortcut behavior instead of preventing the keyboard shortcut.
For example, 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.
<template>
<div>
<ejs-documenteditor ref="documenteditor" :height="height" style="width: 100%;display:block" :isReadOnly='false'
:enableSelection='true' :enableSfdtExport='true' :enableWordExport=true :enableEditor='true'
v-bind:keyDown='onKeyDown'></ejs-documenteditor>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, DocumentEditorKeyDownEventArgs, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
const documenteditor = ref(null);
const height = '370px';
provide('DocumentEditor ', [SfdtExport, Selection, Editor, WordExport]);
const onKeyDown = function (args) {
let keyCode = args.event.which || args.event.keyCode;
let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
let 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.value.save('sample', 'Docx');
args.event.preventDefault();
} else if (isCtrlKey && isAltKey && keyCode === 83) {
documenteditor.value.save('sample', 'Sfdt');
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
<div>
<ejs-documenteditor ref="documenteditor" :height="height" style="width: 100%;display:block" :isReadOnly='false'
:enableSelection='true' :enableSfdtExport='true' :enableWordExport=true :enableEditor='true'
v-bind:keyDown='onKeyDown'></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, DocumentEditorKeyDownEventArgs, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
name: "App",
components: {
"ejs-documenteditor": DocumentEditorComponent
},
data: function () {
return {
height: '370px'
};
},
provide: {
DocumentEditor: [SfdtExport, Selection, Editor, WordExport]
},
methods: {
onKeyDown: function (args) {
let keyCode = args.event.which || args.event.keyCode;
let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
let 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;
this.$refs.documenteditor.save('sample', 'Docx');
args.event.preventDefault();
} else if (isCtrlKey && isAltKey && keyCode === 83) {
this.$refs.documenteditor.save('sample', 'Sfdt');
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>