Keyboard support in Angular Rich text editor component

22 Mar 202517 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.

Toolbar

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

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();
            }
        }
    }
}

main.ts

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

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 = {
        bold: 'ctrl+alt+b',
        italic: 'ctrl+alt+i',
        underline: 'ctrl+alt+u',
    }
    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();
            }
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));