Keyboard support in EJ2 TypeScript Markdown Editor Control

22 Mar 202512 minutes to read

You can use the following keyboard shortcuts when the Rich Text Editor is set to editorMode as Markdown.

Toolbar

These shortcuts provide quick access to toolbar functions for managing menus and dialogs.

Actions Windows Mac
Focus on toolbar Alt + F10 ⌥ + F10
Close dropdowns/menu and dialogs Esc Esc

Content editing and formatting

These shortcuts help in efficiently editing and formatting text content.

Actions Windows Mac
Select all content Ctrl + A ⌘ + A
Insert a hard line break (a new paragraph) Enter Enter
Make text bold Ctrl + B ⌘ + B
Italicize text Ctrl + I ⌘ + I
Apply strikethrough Ctrl + Shift + S ⌘ + ⇧ + S

Inserting

These shortcuts allow for the quick insertion of tables, links, and images.

Actions Windows Mac
Open the insert table dialog Ctrl + Shift + E ⌘ + ⇧ + E
Create link Ctrl + K ⌘ + K
Open the insert image dialog Ctrl + Shift + I ⌘ + ⇧ + I

Text manipulation

These shortcuts help in modifying text case and applying superscript or subscript.

Actions Windows Mac
Convert text to uppercase Ctrl + Shift + U ⌘ + ⇧ + U
Convert text to lowercase Ctrl + Shift + L ⌘ + ⇧ + L
Apply superscript Ctrl + Shift + = ⌘ + ⇧ + =
Apply subscript Ctrl + = ⌘ + =

Lists

These shortcuts enable the creation of ordered and unordered lists.

Actions Windows Mac
Create an ordered list Ctrl + Shift + O ⌘ + ⇧ + O
Create an unordered list Ctrl + Alt + O ⌘ + ⌥ + O

Clipboard operations

These shortcuts facilitate copying, cutting, and pasting content.

Actions Windows Mac
Copy the selected content Ctrl + C ⌘ + C
Cut the selected content Ctrl + X ⌘ + X
Paste the copied or cut content Ctrl + V ⌘ + V

Undo & redo

These shortcuts allow for undoing and redoing recent changes.

Actions Windows Mac
Undo Ctrl + Z ⌘ + Z
Redo Ctrl + Y ⌘ + Y

Other actions

These shortcuts provide additional functionalities like fullscreen mode.

Actions Windows Mac
Toggle fullscreen mode Ctrl + Shift + F ⌘ + ⇧ + F 
import { RichTextEditor, Toolbar, MarkdownEditor } from '@syncfusion/ej2-richtexteditor';

RichTextEditor.Inject(Toolbar, MarkdownEditor);

let editor: RichTextEditor = new RichTextEditor({
    editorMode: 'Markdown',
    toolbarSettings: {
        items: ['Bold', 'Italic', 'StrikeThrough', '|',
            'Formats', 'OrderedList', 'UnorderedList', '|',
            'CreateLink', 'Image', '|','Undo', 'Redo']
    }});
editor.appendTo('#editor');

document.onkeyup = function (e) {
    if (e.altKey && e.keyCode === 84 /* t */) {
        // press alt+t to focus the component.
        editor.focusIn();
    }
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Rich Text 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="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
     <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
   
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
        <div id='editor'>
In Rich Text Editor , you click the toolbar buttons to format the words and the changes are visible immediately. 
Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
and phrases should look different from each other

Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.

We can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/).

The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content            
        </div>
    </div>
    <style>
        .e-richtexteditor textarea.e-content {
            float: left;
            border-right: 1px solid rgba(0, 0, 0, 0.12);
        }
        .e-richtexteditor .e-rte-content .e-content{
            min-height: 150px;
        }
    
        .e-richtexteditor .e-rte-content {
            overflow: hidden;
        }
    
        .e-icon-btn.e-active .e-md-preview::before {
            content: '\e350';
        }
    
        .e-icon-btn .e-md-preview::before {
            content: '\e345';
        }
    
        .e-rte-content .e-content {
            float: right;
            width: 50%;
            overflow: auto;
            height: inherit;
            padding: 8px;
            height: 100%;
        }
    
        .e-rte-content .e-content.e-pre-source {
            width: 100%;
        }
    
        .highcontrast .e-richtexteditor textarea.e-content {
            border-right: 1px solid #fff;
        }
    
        .sb-header {
            z-index: 100;
        }
    </style>
</body>

</html>