React HtmlEditor - Keyboard Support

Users can use the following keys to interact with the UI component:

PC Mac Action
Ctrl + C ⌘ + C Copy
Ctrl + V ⌘ + V Paste
Ctrl + Z ⌘ + Z Undo
Ctrl + Y ⌘ + Y Redo
Ctrl + A ⌘ + A Select All
Ctrl + B ⌘ + B Bold
Ctrl + I ⌘ + I Italic
Enter Insert a line break (a new paragraph)
Shift + Enter Insert a line break (in the same paragraph)
Tab Nest current list item (when in a list)
Increase indentation (when at the start of a paragraph)
Move the cursor to the next table cell
Shift + Tab Move the cursor to the previous table cell
Decrease indentation (when at the start of a paragraph)
↑ → ↓ ← Navigate through the table
Enter Move the cursor outside the table (when in the last row)
Esc Close active dialog
Enter Apply active dialog data

Use the registerKeyHandler(key, handler) method to implement a custom handler for a key.

jQuery
JavaScript
function registerKeyHandlers () {
    const htmlEditor = $("#htmlEditorContainer").dxHtmlEditor("instance");
    htmlEditor.registerKeyHandler("backspace", function(e) {
        // The argument "e" contains information on the event
    });
    htmlEditor.registerKeyHandler("space", function(e) {
        // ...
    });
}
Angular
TypeScript
import { ..., ViewChild, AfterViewInit } from '@angular/core';
import { DxHtmlEditorModule, DxHtmlEditorComponent } from 'devextreme-angular';
// ...
export class AppComponent implements AfterViewInit {
    @ViewChild(DxHtmlEditorComponent, { static: false }) htmlEditor: DxHtmlEditorComponent;
    // Prior to Angular 8
    // @ViewChild(DxHtmlEditorComponent) htmlEditor: DxHtmlEditorComponent;

    ngAfterViewInit () {
        this.htmlEditor.instance.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information on the event
        });
        this.htmlEditor.instance.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})
Vue
<template>
    <DxHtmlEditor :ref="myHtmlEditorRef" />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxHtmlEditor from 'devextreme-vue/html-editor';

const myHtmlEditorRef = 'my-html-editor';

export default {
    components: {
        DxHtmlEditor
    },
    data() {
        return {
            myHtmlEditorRef
        }
    },
    computed: {
        htmlEditor: function() {
            return this.$refs[myHtmlEditorRef].instance;
        }
    },
    mounted: function() {
        this.htmlEditor.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information on the event
        });
        this.htmlEditor.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { HtmlEditor } from 'devextreme-react/html-editor';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.htmlEditorRef = React.createRef();
    }

    render() {
        return (
            <HtmlEditor ref={this.htmlEditorRef} />
        );
    }

    get htmlEditor() {
        return this.htmlEditorRef.current.instance;
    }

    componentDidMount() {
        this.htmlEditor.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information on the event
        });
        this.htmlEditor.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}

export default App;
See Also
jQuery
Angular
Vue
React