Keyboard Shortcuts in Angular Block Editor component

18 Dec 20257 minutes to read

The Block Editor component 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 shortcuts for menu-based actions, such as the Slash Command Menu, Block Action Menu, and Context Menu, by modifying the shortcut property in their respective menu settings.

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

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

import { BlockEditorModule } from '@syncfusion/ej2-angular-blockeditor';
import { Component } from '@angular/core';

@Component({
    imports: [ BlockEditorModule ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render BlockEditor component. -->
    <div class="container" style="width: 40px; margin: 50px auto;">
        <ejs-blockeditor [keyConfig]="keyConfig" />
    </div>`
})

export class AppComponent {
    keyConfig = {
        bold: 'alt+b',
        italic: 'alt+i'
    };
}

Search docs

Ask HelpBot