# Keyboard Support in ej2-asp-mvc 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://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_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://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_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 razor tabtitle="CSHTML" %}
@Html.EJS().RichTextEditor("keyboard").Created("created").Height("500").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.value = @"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.
";
ViewBag.items = new[] { "Bold", "Italic", "Underline", "StrikeThrough",
"FontName", "FontSize", "FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "OrderedList", "UnorderedList",
"Outdent", "Indent", "|",
"CreateLink", "Image", "CreateTable", "|", "FormatPainter" , "ClearFormat", "Print",
"SourceCode", "FullScreen", "|", "Undo", "Redo"
};
return View();
}
}
{% endhighlight %}
{% endtabs %}
## Custom Key Config
You can able to customize the key config for the keyboard interaction of Rich Text Editor, using [KeyConfig](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_KeyConfig) property.
In the following sample, customize the bold, italic, underline toolbar action with `ctrl` + `alt` + `b`, `ctrl` + `alt` + `i` and `ctrl` + `alt` + `u` respectively.
{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
@Html.EJS().RichTextEditor("customKey").KeyConfig((object)ViewBag.keyConfig).ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()
{% endhighlight %}
{% highlight c# tabtitle="Controller.cs" %}
public class HomeController : Controller
{
public KeyModel KeyConfigData = new KeyModel();
public class KeyModel
{
public string bold { get; set; }
public string italic { get; set; }
public string underline { get; set; }
}
public ActionResult Index()
{
ViewBag.value = @"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.
";
KeyConfigData.bold = "ctrl+alt+b";
KeyConfigData.italic = "ctrl+alt+i";
KeyConfigData.underline = "ctrl+alt+u";
ViewBag.keyConfig = KeyConfigData;
ViewBag.items = new[] { "Bold", "Italic", "Underline", "StrikeThrough",
"FontName", "FontSize", "FontColor", "BackgroundColor",
"LowerCase", "UpperCase", "|",
"Formats", "Alignments", "OrderedList", "UnorderedList",
"Outdent", "Indent", "|",
"CreateLink", "Image", "CreateTable", "|", "ClearFormat", "Print",
"SourceCode", "FullScreen", "|", "Undo", "Redo" };
return View();
}
}
{% endhighlight %}
{% endtabs %}
