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.
The following code shows how to prevent the CTRL + C
keyboard shortcut for copying selected content in document editor.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, DocumentEditorKeyDownEventArgs, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(SfdtExport, Selection, Editor);
function App() {
let documenteditor: DocumentEditorComponent;
React.useEffect(() => {
componentDidMount()
}, []);
function componentDidMount() {
documenteditor.keyDown = function (args: DocumentEditorKeyDownEventArgs) {
let keyCode: number = args.event.which || args.event.keyCode;
let isCtrlKey: boolean = (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;
}
}
}
return (
<DocumentEditorComponent
id="container"
ref={scope => {
documenteditor = scope;
}}
isReadOnly={false}
enableSelection={true}
enableEditor={true}
height={'330px'}
/>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(SfdtExport, Selection, Editor);
function App() {
let documenteditor;
React.useEffect(() => {
componentDidMount();
}, []);
function componentDidMount() {
documenteditor.keyDown = 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;
}
};
}
return (<DocumentEditorComponent id="container" ref={scope => {
documenteditor = scope;
}} isReadOnly={false} enableSelection={true} enableEditor={true} height={'330px'}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
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.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, DocumentEditor, SfdtExport, Selection, Editor, DocumentEditorKeyDownEventArgs } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(SfdtExport, Selection, Editor);
function App() {
let documentEditor: DocumentEditorComponent;
React.useEffect(() => {
componentDidMount()
}, []);
function componentDidMount() {
documentEditor.keyDown = (args: DocumentEditorKeyDownEventArgs) => {
let keyCode: number = args.event.which || args.event.keyCode;
let isCtrlKey: boolean = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);
let isAltKey: boolean = 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;
//Download the document in docx format.
documentEditor.save('sample', 'Docx');
args.event.preventDefault();
} else if (isCtrlKey && isAltKey && keyCode === 83) {
//Download the document in sfdt format.
documentEditor.save('sample', 'Sfdt');
}
}
}
return (
<DocumentEditorComponent
id="container"
ref={scope => {
documentEditor = scope;
}}
isReadOnly={false}
enableSelection={true}
enableEditor={true}
height={'330px'}
/>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, SfdtExport, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(SfdtExport, Selection, Editor);
function App() {
let documentEditor;
React.useEffect(() => {
componentDidMount();
}, []);
function componentDidMount() {
documentEditor.keyDown = (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;
//Download the document in docx format.
documentEditor.save('sample', 'Docx');
args.event.preventDefault();
}
else if (isCtrlKey && isAltKey && keyCode === 83) {
//Download the document in sfdt format.
documentEditor.save('sample', 'Sfdt');
}
};
}
return (<DocumentEditorComponent id="container" ref={scope => {
documentEditor = scope;
}} isReadOnly={false} enableSelection={true} enableEditor={true} height={'330px'}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));