Keyboard Shortcuts in EJ2 Modern Rich Text Editor

The Syncfusion Essential JS 2 Modern Rich Text Editor provides built-in keyboard shortcuts to perform formatting, edit content, insert elements, and navigate the user interface efficiently without relying on mouse interactions.

Modifier Key Conventions

Default shortcuts use standard cross-platform modifier keys:

Platform	Modifier Key Representation
Windows / Linux	`Ctrl`, `Shift`, `Alt`
macOS	`Cmd (⌘)`, `Shift (⇧)`, `Option (⌥)`

Built-In Keyboard Shortcuts Reference

Text Formatting & Styles

Action	Windows / Linux	macOS	Description
Bold	`Ctrl` + `B`	`⌘` + `B`	Toggles bold styling on the selected text.
Italic	`Ctrl` + `I`	`⌘` + `I`	Toggles italic styling on the selected text.
Underline	`Ctrl` + `U`	`⌘` + `U`	Applies or removes underline formatting.
Strikethrough	`Ctrl` + `Shift` + `S`	`⌘` + `Shift` + `S`	Strikes through the selected text.
Subscript	`Ctrl` + `=`	`⌘` + `=`	Converts the selected text to subscript.
Superscript	`Ctrl` + `Shift` + `=`	`⌘` + `Shift` + `=`	Converts the selected text to superscript.
Inline Code	`Ctrl` + `E`	`⌘` + `E`	Formats the selected text as inline code.
Clear Format	`Ctrl` + `Shift` + `R`	`⌘` + `Shift` + `R`	Clears inline formatting from the selection.
Uppercase	`Ctrl` + `Shift` + `U`	`⌘` + `Shift` + `U`	Transforms the selection to uppercase.
Lowercase	`Ctrl` + `Shift` + `L`	`⌘` + `Shift` + `L`	Transforms the selection to lowercase.

Lists & Indentation

Action	Windows / Linux	macOS	Description
Ordered List	`Ctrl` + `Shift` + `O`	`⌘` + `Shift` + `O`	Inserts or toggles a numbered list.
Unordered List	`Ctrl` + `Alt` + `O`	`⌘` + `Option` + `O`	Inserts or toggles a bulleted list.
Checklist	`Ctrl` + `Shift` + `7`	`⌘` + `Shift` + `7`	Inserts or toggles an interactive checklist.
Indent	`Tab`	`Tab`	Increases the indentation level of a list item or text.
Outdent	`Shift` + `Tab`	`Shift` + `Tab`	Decreases the indentation level of a list item or text.

Insertions & Blocks

Action	Windows / Linux	macOS	Description
Insert Link	`Ctrl` + `K`	`⌘` + `K`	Opens the dialog to insert or edit a hyperlink.
Insert Image	`Ctrl` + `Shift` + `I`	`⌘` + `Shift` + `I`	Opens the image upload dialog.
Insert Table	`Ctrl` + `Shift` + `E`	`⌘` + `Shift` + `E`	Opens the table insertion grid/dialog.
Code Block	`Ctrl` + `Shift` + `B`	`⌘` + `Shift` + `B`	Converts the block into a preformatted code snippet.

Action	Windows / Linux	macOS	Description
Undo	`Ctrl` + `Z`	`⌘` + `Z`	Reverts the previous editing action.
Redo	`Ctrl` + `Shift` + `Z`	`⌘` + `Shift` + `Z`	Reapplies the previously undone action.
Toolbar Focus	`Alt` + `F10`	`Option` + `F10`	Shifts focus directly to the first active toolbar item.
Escape	`Esc`	`Esc`	Closes open dropdowns, popups, or dialog windows.

Configuring Keyboard Shortcuts

You can override default shortcut key combinations or assign custom combinations using the keyBindings property.

Syntax Rules

Modifiers and key values are separated with a + symbol (e.g., 'ctrl+alt+k').
Supported modifier tokens: ctrl, shift, alt, and meta.
Key values can be written in lowercase (e.g., 'ctrl+b').
The Modern Rich Text Editor automatically updates corresponding toolbar button tooltips and accessibility attributes to match your custom key bindings.

Configuration Example

Use the keyBindings property to customize or override the default keyboard shortcuts. In the following example, the built-in shortcuts for link insertion, code blocks, and image insertion are remapped to custom key combinations.

main.ts
index.html
import { RichTextEditorUI } from '@syncfusion/ej2-richtexteditor-ui';

const editor: RichTextEditorUI = new RichTextEditorUI( {
    toolbarSettings: {
        items: ['Bold', 'Italic', 'Underline', 'Strikethrough', '|', 'BulletList', 'NumberedList', '|', 'Link', 'Image', 'Table', 'CodeBlock', '|', 'Undo', 'Redo'],
        keyBindings: {
            link: 'ctrl+alt+k',
            image: 'ctrl+alt+i',
            'code-block': 'ctrl+shift+c'
        }
    }
});
editor.appendTo( '#editor' );
<html lang="en">

<head>
    <title>Syncfusion Typescript Modern Editor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-richtexteditor-ui/styles/tailwind3.css" rel="stylesheet" />

     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
    <body>
        <div id='loader'>Loading....</div>
        <div id='container'>
            <div id='editor'></div>
        </div>
    </body>
      <script type="module" src="index.ts"></script>
</html>

Search docs

Ask Syncfusion AI Assistant