Keyboard support in Angular Rich text editor component

8 Feb 202524 minutes to read

The Rich Text Editor has full keyboard accessibility that includes shortcuts to open and other actions with toolbar items, drop-down lists and dialogs.

HTML editor shortcut keys

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

The toolbar shortcuts allow quick navigation and interaction with the toolbar elements, including focusing, moving between tools, and executing actions like closing menus and dialogs.

Actions	Windows	Mac
Focus on toolbar	`Alt` + `F10`	`⌥` + `F10`
Move to the next tool	`→`	`→`, `⌘` + `F`
Move to the previous tool	`←`	`←`, `⌘` + `F`
Close dropdowns/menu and dialogs	`Esc`	`Esc`
Execute the currently focused tool action	`Enter`, `Space`	`Enter`, `Space`

Content editing and formatting

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

Actions	Windows	Mac
Select all content	`Ctrl` + `A`	`⌘` + `A`
Insert a hard line break (a new paragraph)	`Enter`	`Enter`
Insert a soft line break (without starting a new paragraph)	`Shift` + `Enter`	`⇧` + `Enter`
Make text bold	`Ctrl` + `B`	`⌘` + `B`
Italicize text	`Ctrl` + `I`	`⌘` + `I`
Apply strikethrough	`Ctrl` + `Shift` + `S`	`⌘` + `⇧` + `S`
Insert inline code	`Ctrl` + `	`⌘` + `
Create link	`Ctrl` + `K`	`⌘` + `K`
Copy format painter	`Alt` + `Shift` + `C`	`⌥` + `⌘` + `C`
Paste format painter	`Alt` + `Shift` + `V`	`⌥` + `⌘` + `V`
Clear the copy format painter	`Esc`	`Esc`
Tab space (when enableTabKey is enabled)	`Tab`	`Tab`

Inserting

These shortcuts enable you to quickly insert tables, images, audio, and videos into your content.

Actions	Windows	Mac
Open the insert table dialog	`Ctrl` + `Shift` + `E`	`⌘` + `⇧` + `E`
Open the insert image dialog	`Ctrl` + `Shift` + `I`	`⌘` + `⇧` + `I`
Open the insert audio dialog	`Ctrl` + `Shift` + `A`	`⌘` + `⇧` + `A`
Open the insert video dialog	`Ctrl` + `Alt` + `V`	`⌘` + `⌥` + `V`

Table cell

These shortcuts assist in navigating between table cells and managing table rows easily.

Actions	Windows	Mac
Move the selection to the next cell	`Tab`	`Tab`
Move the selection to the previous cell	`Shift` + `Tab`	`⇧` + `Tab`
Insert a new table row (when in the last cell)	`Tab`	`Tab`
Navigate through the table (using arrow keys)	`↑` , `→` , `↓` , `←`	`↑` , `→` , `↓` , `←`

Text manipulation

These shortcuts allow you to manipulate text, such as changing case or applying superscript/subscript formatting.

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` + `=`	`⌘` + `=`

Alignment and formatting

These shortcuts help you quickly adjust text alignment and formatting, such as left, center, or right justification.

Actions	Windows	Mac
Align text to the center	`Ctrl` + `E`	`⌘` + `E`
Justify text	`Ctrl` + `J`	`⌘` + `J`
Align text to the left	`Ctrl` + `L`	`⌘` + `L`
Align text to the right	`Ctrl` + `R`	`⌘` + `R`

List and indentation

These shortcuts help with creating and adjusting ordered and unordered lists, and modifying indentations.

Actions	Windows	Mac
Increase indent	`Ctrl` + `]`	`⌘` + `]`
Decrease indent	`Ctrl` + `[`	`⌘` + `[`
Create an ordered list	`Ctrl` + `Shift` + `O`	`⌘` + `⇧` + `O`
Create an unordered list	`Ctrl` + `Alt` + `O`	`⌘` + `⌥` + `O`

Clipboard operations

These shortcuts streamline copying, cutting, pasting, and pasting content as plain text.

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`
Paste content as plain text	`Ctrl` + `Shift` + `V`	`⌘` + `⌥` + `⇧` + `V`

Undo & Redo

These shortcuts allow you to quickly undo and redo changes to your content.

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

Other actions

These miscellaneous shortcuts help with actions like toggling fullscreen, clearing formatting, and accessing the HTML source.

Actions	PC	Mac
View HTML source	`Ctrl` + `Shift` + `H`	`⌘` + `⇧` + `H`
Toggle fullscreen mode	`Ctrl` + `Shift` + `F`	`⌘` + `⇧` + `F`
Exit Fullscreen	`Esc`	`Esc`
Clear all formatting	`Ctrl` + `Shift` + `R`	`⌘` + `⇧` + `R`

app.component.ts
main.ts
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { Component, ViewChild } from '@angular/core';
import { RichTextEditorComponent, ToolbarService, HtmlEditorService, ImageService, QuickToolbarService, LinkService, FormatPainterService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [  
        RichTextEditorAllModule,
        DialogModule
    ],
    standalone: true,
    selector: 'app-root',
    template:`<ejs-richtexteditor #defaultRTE id='defaultRTE' [toolbarSettings]='tools' (create)='onCreate($event)'></ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService, ImageService, QuickToolbarService, LinkService, FormatPainterService ]
    
})
    
export class AppComponent  {
    @ViewChild('defaultRTE') rteObj: RichTextEditorComponent | undefined;

    public tools = {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
        'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
        'LowerCase', 'UpperCase', '|',
        'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
        'Outdent', 'Indent', '|',
        'CreateLink', 'Image', '|', 'FormatPainter', 'ClearFormat', 'Print',
        'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
    };
    
    onCreate(e: any) {
        document.onkeyup = function (e) {
            if (e.altKey && e.keyCode === 84 /* t */) {
                // press alt+t to focus the component.
                (this as any).rteObj.focusIn();
            }
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Markdown editor shortcut keys

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

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`

app.component.ts
main.ts
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { Component, ViewChild } from '@angular/core';
import { ToolbarService, LinkService, ImageService, MarkdownEditorService, RichTextEditorComponent} from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [ 
        RichTextEditorAllModule,
        DialogModule
    ],
    standalone: true,
    selector: 'app-root',
    template:`<ejs-richtexteditor #defaultRTE id='defaultRTE' [toolbarSettings]='tools' [editorMode]='mode' (create)='onCreate($event)'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, MarkdownEditorService]
})
    
export class AppComponent  {
    @ViewChild('defaultRTE') rteObj: RichTextEditorComponent | undefined;
    
    public tools = {
        items: ['Bold', 'Italic', 'StrikeThrough', '|',
        'Formats', 'OrderedList', 'UnorderedList', '|',
        'CreateLink', 'Image', '|','Undo', 'Redo']
    };
    
    public mode = 'Markdown';
    
    onCreate(e: any) {
        document.onkeyup = function (e) {
            if (e.altKey && e.keyCode === 84 /* t */) {
                // press alt+t to focus the component.
                (this as any).rteObj.focusIn();
            }
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom key config

You can able to customize the key config for the keyboard interaction of Rich Text Editor, using keyConfig property.

In the below sample, you have customize the bold, italic, underline toolbar action with ctrl+alt+b, ctrl+alt+i and ctrl+alt+u respectively.

app.component.ts
main.ts
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { Component, ViewChild } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorComponent} from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [
        RichTextEditorAllModule,
        DialogModule
    ],
    standalone: true,
    selector: 'app-root',
    template:`<ejs-richtexteditor #defaultRTE id='defaultRTE' [toolbarSettings]='tools' [keyConfig]='keyConfig' (create)='onCreate($event)'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
    
})
    
export class AppComponent  {
    @ViewChild('defaultRTE') rteObj: RichTextEditorComponent | undefined;
    public tools = {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
        'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
        'LowerCase', 'UpperCase', '|',
        'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
        'Outdent', 'Indent', '|',
        'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
        'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
    };
    public keyConfig = {
        'copy': 'ctrl+1',
        'cut': 'ctrl+2',
        'paste': 'ctrl+3'
    }
    onCreate(e: any) {
        document.onkeyup = function (e) {
            if (e.altKey && e.keyCode === 84 /* t */) {
                // press alt+t to focus the component.
                (this as any).rteObj.focusIn();
            }
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));