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)
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
Shift + Tab		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

You can implement a custom handler for a key using the registerKeyHandler(key, handler) method.

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;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery HtmlEditor - Keyboard Support

jQuery

Angular

Vue

React

See Also