Keyboard Shortcuts in Angular Block Editor

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 shortcuts cover inline text formatting and link insertion for the currently selected content:

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 create new blocks of a specific type at the current cursor position, or insert them as a sibling block:

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. Both keyboard chords are supported for indent and outdent — Ctrl + ] / Ctrl + [ and Tab / Shift + Tab all produce the same result:

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 editor-wide actions such as undo/redo, the clipboard, and printing:

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 in two ways:

Menu-based actions — slash command, block action, and context menu items each expose a shortcut property in their respective settings models (for example, commandMenuSettings).
Editor-level actions — bold, italic, undo, redo, and other core actions are configured through the editor’s keyConfig property. Pass a map from action name to a shortcut string (for example 'alt+b') to override the default or add a new binding.

The example below overrides Bold to Alt + B and Italic to Alt + I:

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

@Component({
    imports: [BlockEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `
        <div class="container" style="margin: 50px;">
            <ejs-blockeditor [keyConfig]="keyConfig" />
        </div>`
})
export class AppComponent {
    public keyConfig = {
        bold: 'alt+b',
        italic: 'alt+i'
    };
}

Search docs

Ask Syncfusion AI Assistant