Keyboard Shortcuts in EJ2 JavaScript Block Editor control

25 Jun 20257 minutes to read

The Block Editor control provides comprehensive keyboard shortcuts to enhance productivity and streamline content creation. These shortcuts are organized into different categories based on their functionality, allowing users to quickly access various features without relying on mouse interactions.

Content editing and formatting

These keyboard shortcuts allow for quick access to content editing features like bold, italic, and text formatting options.

Actions	Windows	Mac
Bold	`Ctrl` + `B`	`⌘` + `B`
Italic	`Ctrl` + `I`	`⌘` + `I`
Underline	`Ctrl` + `U`	`⌘` + `U`
Strikethrough	`Ctrl` + `Shift` + `X`	`⌘` + `⇧` + `X`
Insert Link	`Ctrl` + `K`	`⌘` + `K`

Block creation and management

These shortcuts enable quick creation of different block types and management of existing blocks.

Actions	Windows	Mac
Create Paragraph	`Ctrl` + `Alt` + `P`	`⌘` + `⌥` + `P`
Create CheckList	`Ctrl` + `Shift` + `7`	`⌘` + `⇧` + `7`
Create Bullet List	`Ctrl` + `Shift` + `8`	`⌘` + `⇧` + `8`
Create Numbered List	`Ctrl` + `Shift` + `9`	`⌘` + `⇧` + `9`
Create Heading 1	`Ctrl` + `Alt` + `1`	`⌘` + `⌥` + `1`
Create Heading 2	`Ctrl` + `Alt` + `2`	`⌘` + `⌥` + `2`
Create Heading 3	`Ctrl` + `Alt` + `3`	`⌘` + `⌥` + `3`
Create Heading 4	`Ctrl` + `Alt` + `4`	`⌘` + `⌥` + `4`
Create Quote	`Ctrl` + `Alt` + `Q`	`⌘` + `⌥` + `Q`
Create Code Block	`Ctrl` + `Alt` + `K`	`⌘` + `⌥` + `K`
Create Callout	`Ctrl` + `Alt` + `C`	`⌘` + `⌥` + `C`
Insert Image	`Ctrl` + `Alt` + `/`	`⌘` + `⌥` + `/`
Insert Divider	`Ctrl` + `Shift` + `-`	`⌘` + `⇧` + `-`

Block level actions

These shortcuts provide quick access to block-specific actions like duplication, deletion, indentation and movement.
[For indent, both ctrl+] and tab are supported. For outdent, both ctrl+[ and shift+tab are supported.]

Actions	Windows	Mac
Duplicate Block	`Ctrl` + `D`	`⌘` + `D`
Delete Block	`Ctrl` + `Shift` + `D`	`⌘` + `⇧` + `D`
Move Block Up	`Ctrl` + `Shift` + `↑`	`⌘` + `⇧` + `↑`
Move Block Down	`Ctrl` + `Shift` + `↓`	`⌘` + `⇧` + `↓`
Increase Indent	`Ctrl` + `]` or `Tab`	`⌘` + `]` or `Tab`
Decrease Indent	`Ctrl` + `[` or `Shift` + `Tab`	`⌘` + `[` or `⇧` + `Tab`

General editor operations

These shortcuts cover general editor functionality including undo/redo operations and clipboard actions.

Actions	Windows	Mac
Undo	`Ctrl` + `Z`	`⌘` + `Z`
Redo	`Ctrl` + `Y`	`⌘` + `Y`
Cut	`Ctrl` + `X`	`⌘` + `X`
Copy	`Ctrl` + `C`	`⌘` + `C`
Paste	`Ctrl` + `V`	`⌘` + `V`
Print	`Ctrl` + `P`	`⌘` + `P`

Customizing keyboard shortcuts

You can customize menu level shortcuts such as Slash Command Menu, Block Action Menu and Context Menu on the respective menu settings config by modifying it’s shortcut property.

For other operations, you can customize the keyboard shortcuts by configuring the keyConfig property when initializing the Block Editor control. This allows you to override default shortcuts or add new ones according to your application’s requirements.

In the below example, the shortcut for bold formatting is changed to Alt + B and for italic formatting to Alt + I.

const editor = new BlockEditor({
    keyConfig: {
        'bold': 'alt+b',
        'italic': 'alt+i'
    }
});