# Keyboard Support in Angular Rich Text Editor Component
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](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#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](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#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 |
{% tabs %}
{% highlight ts tabtitle="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:``,
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();
}
}
}
}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
## Custom key config
You can able to customize the key config for the keyboard interaction of Rich Text Editor, using [`keyConfig`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#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.
{% tabs %}
{% highlight ts tabtitle="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:``,
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();
}
}
}
}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}