# Keyboard Support in React Rich Text Editor Component
The 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/react/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/react/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 |
`[Class-component]`
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
/**
* Rich Text Editor - HTMLEditor KeyConfig sample
*/
import { RichTextEditorComponent, Inject, Toolbar, HtmlEditor, Image, QuickToolbar, Link, FormatPainter} from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
rteObj;
toolbarSettings = {
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']
}
docKeyUp(e) {
if (e.altKey && e.keyCode === 84) { /* t */
// press alt+t to focus the component.
this.rteObj.focusIn();
}
}
componentDidMount() {
document.addEventListener('keyup', this.docKeyUp.bind(this));
}
render() {
return ( { this.rteObj = richtexteditor; }} height={450} toolbarSettings={this.toolbarSettings}>
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.
Key features:
-
Provides <IFRAME> and <DIV> modes
-
Capable of handling markdown editing.
-
Contains a modular library to load the necessary functionality on demand.
-
Provides a fully customizable toolbar.
-
Provides HTML view to edit the source directly for developers.
-
Supports third-party library integration.
-
Allows preview of modified content before saving it.
-
Handles images, hyperlinks, video, hyperlinks, uploads, etc.
-
Contains undo/redo manager.
-
Creates bulleted and numbered lists.
);
}
}
export default App;
{% endhighlight %}
{% highlight ts tabtitle="app.tsx" %}
/**
* Rich Text Editor - HTMLEditor KeyConfig sample
*/
import { RichTextEditorComponent, Inject, Toolbar, HtmlEditor, Image, QuickToolbar, Link, FormatPainter} from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
private rteObj: RichTextEditorComponent;
private toolbarSettings: object = {
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']
}
public docKeyUp(e: any) {
if (e.altKey && e.keyCode === 84) { /* t */
// press alt+t to focus the component.
this.rteObj.focusIn();
}
}
public componentDidMount() {
document.addEventListener('keyup', this.docKeyUp.bind(this));
}
public render() {
return (
{ this.rteObj = richtexteditor! }} height={450} toolbarSettings={this.toolbarSettings}>
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.
Key features:
-
Provides <IFRAME> and <DIV> modes
-
Capable of handling markdown editing.
-
Contains a modular library to load the necessary functionality on demand.
-
Provides a fully customizable toolbar.
-
Provides HTML view to edit the source directly for developers.
-
Supports third-party library integration.
-
Allows preview of modified content before saving it.
-
Handles images, hyperlinks, video, hyperlinks, uploads, etc.
-
Contains undo/redo manager.
-
Creates bulleted and numbered lists.
);
}
}
export default App;
{% endhighlight %}
{% endtabs %}
`[Functional-component]`
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
/**
* Rich Text Editor - HTMLEditor KeyConfig sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteObj;
let toolbarSettings = {
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']
};
function docKeyUp(e) {
if (e.altKey && e.keyCode === 84) { /* t */
// press alt+t to focus the component.
rteObj.focusIn();
}
}
function componentDidMount() {
document.addEventListener('keyup', docKeyUp.bind(this));
}
return ( { rteObj = richtexteditor; }} height={450} toolbarSettings={toolbarSettings}>
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.
Key features:
-
Provides <IFRAME> and <DIV> modes
-
Capable of handling markdown editing.
-
Contains a modular library to load the necessary functionality on demand.
-
Provides a fully customizable toolbar.
-
Provides HTML view to edit the source directly for developers.
-
Supports third-party library integration.
-
Allows preview of modified content before saving it.
-
Handles images, hyperlinks, video, hyperlinks, uploads, etc.
-
Contains undo/redo manager.
-
Creates bulleted and numbered lists.
);
}
export default App;
{% endhighlight %}
{% highlight ts tabtitle="app.tsx" %}
/**
* Rich Text Editor - HTMLEditor KeyConfig sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteObj: RichTextEditorComponent;
let toolbarSettings: object = {
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']
}
function docKeyUp(e: any) {
if (e.altKey && e.keyCode === 84) { /* t */
// press alt+t to focus the component.
rteObj.focusIn();
}
}
function componentDidMount() {
document.addEventListener('keyup', docKeyUp.bind(this));
}
return (
{rteObj = richtexteditor! }} height={450} toolbarSettings={toolbarSettings}>
The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.
Key features:
-
Provides <IFRAME> and <DIV> modes
-
Capable of handling markdown editing.
-
Contains a modular library to load the necessary functionality on demand.
-
Provides a fully customizable toolbar.
-
Provides HTML view to edit the source directly for developers.
-
Supports third-party library integration.
-
Allows preview of modified content before saving it.
-
Handles images, hyperlinks, video, hyperlinks, uploads, etc.
-
Contains undo/redo manager.
-
Creates bulleted and numbered lists.
);
}
export default App;
{% endhighlight %}
{% endtabs %}
## Custom key config
Customize the key config for the keyboard interaction of Rich Text Editor, using the [`keyConfig`](https://ej2.syncfusion.com/react/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.
`[Class-component]`
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
rteObj;
toolbarSettings = {
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']
};
rteValue = "The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.
Key features:
Provides <IFRAME> and <DIV> modes.
Bulleted and numbered lists.
Handles images, hyperlinks, videos, hyperlinks, uploads, etc.
Contains undo/redo manager.
";
keyConfig = {
bold: 'ctrl+alt+b',
italic: 'ctrl+alt+i',
underline: 'ctrl+alt+u',
};
docKeyUp(e) {
if (e.altKey && e.keyCode === 84) { /* t */
// press alt+t to focus the component.
this.rteObj.focusIn();
}
}
componentDidMount() {
document.addEventListener('keyup', this.docKeyUp.bind(this));
}
render() {
return ( { this.rteObj = richtexteditor; }} height={450} toolbarSettings={this.toolbarSettings} keyConfig={this.keyConfig}>
);
}
}
export default App;
{% endhighlight %}
{% highlight ts tabtitle="app.tsx" %}
/**
* Rich Text Editor - Custom KeyConfig Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
private rteObj: RichTextEditorComponent;
private toolbarSettings: object = {
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']
}
private rteValue: string = "The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.
Key features:
Provides <IFRAME> and <DIV> modes.
Bulleted and numbered lists.
Handles images, hyperlinks, videos, hyperlinks, uploads, etc.
Contains undo/redo manager.
";
private keyConfig: object = {
bold: 'ctrl+alt+b',
italic: 'ctrl+alt+i',
underline: 'ctrl+alt+u',
}
public docKeyUp(e: any) {
if (e.altKey && e.keyCode === 84) { /* t */
// press alt+t to focus the component.
this.rteObj.focusIn();
}
}
public componentDidMount() {
document.addEventListener('keyup', this.docKeyUp.bind(this));
}
public render() {
return (
{ this.rteObj = richtexteditor! }} height={450} toolbarSettings={this.toolbarSettings} keyConfig={this.keyConfig}>
);
}
}
export default App;
{% endhighlight %}
{% endtabs %}
`[Functional-component]`
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteObj;
let rteValue = "The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.
Key features:
Provides <IFRAME> and <DIV> modes.
Bulleted and numbered lists.
Handles images, hyperlinks, videos, hyperlinks, uploads, etc.
Contains undo/redo manager.
";
let toolbarSettings = {
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']
};
let keyConfig = {
bold: 'ctrl+alt+b',
italic: 'ctrl+alt+i',
underline: 'ctrl+alt+u',
};
function docKeyUp(e) {
if (e.altKey && e.keyCode === 84) { /* t */
// press alt+t to focus the component.
rteObj.focusIn();
}
}
function componentDidMount() {
document.addEventListener('keyup', docKeyUp.bind(this));
}
return ( { rteObj = richtexteditor; }} height={450} toolbarSettings={toolbarSettings} keyConfig={keyConfig}>
);
}
export default App;
{% endhighlight %}
{% highlight ts tabtitle="app.tsx" %}
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteObj: RichTextEditorComponent;
let rteValue: string = "The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.
Key features:
Provides <IFRAME> and <DIV> modes.
Bulleted and numbered lists.
Handles images, hyperlinks, videos, hyperlinks, uploads, etc.
Contains undo/redo manager.
";
let toolbarSettings: object = {
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']
}
let keyConfig: object = {
bold: 'ctrl+alt+b',
italic: 'ctrl+alt+i',
underline: 'ctrl+alt+u',
}
function docKeyUp(e: any) {
if (e.altKey && e.keyCode === 84) { /* t */
// press alt+t to focus the component.
rteObj.focusIn();
}
}
function componentDidMount() {
document.addEventListener('keyup', docKeyUp.bind(this));
}
return (
{ rteObj = richtexteditor! }} height={450} toolbarSettings={toolbarSettings} keyConfig={keyConfig}>
);
}
export default App;
{% endhighlight %}
{% endtabs %}
