From cf8c043574613d0a547641f045b4eec6781cbd82 Mon Sep 17 00:00:00 2001 From: Kokila Poovendran Date: Fri, 31 Jan 2025 15:57:56 +0530 Subject: [PATCH 1/7] 936559: Improve the documentation for keyboard shortcut keys in the Rich Text Editor component --- .../EJ2_ASP.MVC/keyboard-support.md | 264 +++++++++++++----- .../EJ2_ASP.NETCORE/keyboard-support.md | 259 ++++++++++++----- ej2-asp-core-toc.html | 2 +- ej2-asp-mvc-toc.html | 2 +- 4 files changed, 394 insertions(+), 133 deletions(-) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/keyboard-support.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/keyboard-support.md index 0fd926b1e2..6130688737 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/keyboard-support.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/keyboard-support.md @@ -8,52 +8,126 @@ publishingplatform: ##Platform_Name## documentation: ug --- - # Keyboard Support in ##Platform_Name## 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 Formation Shortcut Key - -You can use the following key shortcuts when the Rich Text Editor renders with HTML edit mode. - -| Actions | Keyboard shortcuts | -|----------------|---------| -| Toolbar focus | Alt + f10 | -| Insert link | Ctrl + k | -| Insert image | Ctrl + Shift + i | -| Insert audio | Ctrl + Shift + a | -| Insert video | Ctrl + Alt + v | -| Insert table | Ctrl + Shift + e | -| Undo | Ctrl + z | -| Redo | Ctrl + y | -| Copy | Ctrl + c | -| Cut | Ctrl + x | -| Paste| Ctrl + v | -| Bold| Ctrl + b | -| Italic| Ctrl + i | -| Underline| Ctrl + u | -| Strikethrough| Ctrl + Shift + s | -| Inline Code | Ctrl + ` | -| Uppercase| Ctrl + Shift + u | -| Lowercase| Ctrl + Shift + l | -| Superscript| Ctrl + Shift + = | -| Subscript| Ctrl + = | -| Indents| Ctrl + ] | -| Outdents| Ctrl + [ | -| HTML source | Ctrl + Shift + h | -| Fullscreen| Ctrl + Shift + f | -| Exit Fullscreen| Esc | -| Justify center| Ctrl + e | -| Justify full | Ctrl + j | -| Justify left | Ctrl + l | -| Justify right | Ctrl + r | -| Clear format | Ctrl + Shift + r | -| Ordered list | Ctrl + Shift + o | -| Unordered list | Ctrl + Alt + o | -| Format Painter Copy| Alt + Shift + c | -| Format Painter Paste| Alt + Shift + v | -| Format Painter Escape | Esc | +You can use the following key shortcuts when the Rich Text Editor renders with `HTML` [EditorMode](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EditorMode). + +### 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 | +|----------------|---------| --------- | +| Toolbar focus| Alt + F10 | ⌥ + F10 | +| Move to next tool | → | →, ⌘ + F | +| Move to 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| Ctrl + A | ⌘+ A | +| Insert new line | Enter | Enter | +| Insert a soft break (line break without starting a new paragraph) | Shift + Enter | ⇧+ Enter | +| Bold| Ctrl + B | ⌘ + B | +| Italic| Ctrl + I | ⌘ + I | +| Strikethrough| Ctrl + Shift + S | ⌘ + ⇧ + S | +| 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 | +|----------------|---------| --------- | +| Insert table| Ctrl + Shift + E | ⌘ + ⇧+E | +| Insert image| Ctrl + Shift + I | ⌘+⇧+I | +| Insert audio | Ctrl + Shift + A | ⌘+⇧+A | +| Insert video | Ctrl + Alt + V | ⌘+⌥+V | + +### Table cell + +These shortcuts assist in navigating between table cells and managing table rows easily. + +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Move to the next cell | Tab | Tab | +| Move 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 | +|----------------|---------| --------- | +| Uppercase| Ctrl + Shift + U | ⌘+⇧+U | +| Lowercase| Ctrl + Shift + L | ⌘+⇧+L | +| Superscript| Ctrl + Shift + = | ⌘+⇧+= | +| 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 | +|----------------|---------| --------- | +| Justify center| Ctrl + E | ⌘+E | +| Justify full | Ctrl + J | ⌘+J | +| Justify left | Ctrl + L | ⌘+L | +| Justify right | Ctrl + R | ⌘+R | + +## List and Indentation + +These shortcuts help with creating and adjusting ordered and unordered lists, and modifying indentations. + +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Indents| Ctrl + ] | ⌘+] | +| Outdents| Ctrl + [ | ⌘+[ | +| Ordered list| Ctrl + Shift + O | ⌘+⇧+O | +| Unordered list| Ctrl + Alt + O | ⌘+⌥+O | + +### Clipboard Operations + +These shortcuts streamline copying, cutting, pasting, and pasting content as plain text. + +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Copy| Ctrl + C | ⌘+C | +| Cut| Ctrl + X | ⌘+X | +| Paste| 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 | +|----------------|---------| --------- | +| HTML source | Ctrl + Shift + H | ⌘+⇧+H | +| Fullscreen| Ctrl + Shift + F | ⌘+⇧+F | +| Exit Fullscreen| Esc | Esc | +| Clear format | Ctrl + Shift + R | ⌘+⇧+R | {% if page.publishingplatform == "aspnet-core" %} @@ -78,33 +152,87 @@ You can use the following key shortcuts when the Rich Text Editor renders with H {% endtabs %} {% endif %} +## Markdown Formation Shortcut Key +You can use the following key shortcuts when the Rich Text Editor renders with `Markdown` [EditorMode](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EditorMode). -## Markdown Formation Shortcut Key +### Toolbar + +These shortcuts provide quick access to toolbar functions for managing menus and dialogs. + +| Actions | Windows | Mac | +|----------------|---------| ---------| +| Toolbar focus| 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| Ctrl + A | ⌘+ A | +| Insert new line | Enter | Enter | +| Bold| Ctrl + B | ⌘ + B | +| Italic| Ctrl + I | ⌘ + I | +| Strikethrough| Ctrl + Shift + S | ⌘ + ⇧ + S | + +### Inserting + +These shortcuts allow for the quick insertion of tables, links, and images. + +| Actions | Windows | Mac | +|----------------|---------| ---------| +| Insert table| Ctrl + Shift + E | ⌘ + ⇧+E | +| Insert link| Ctrl + K | ⌘+ K | +| Insert image| Ctrl + Shift + I | ⌘+⇧+I | + +### Text Manipulation + +These shortcuts help in modifying text case and applying superscript or subscript. + +| Actions | Windows | Mac | +|----------------|---------| ---------| +| Uppercase| Ctrl + Shift + U | ⌘+⇧+U | +| Lowercase| Ctrl + Shift + L | ⌘+⇧+L | +| Superscript| Ctrl + Shift + = | ⌘+⇧+= | +| Subscript| Ctrl + = | ⌘+= | + +## Lists + +These shortcuts enable the creation of ordered and unordered lists. + +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Ordered list| Ctrl + Shift + O | ⌘+⇧+O | +| Unordered list| Ctrl + Alt + O | ⌘+⌥+O | + +### Clipboard Operations + +These shortcuts facilitate copying, cutting, and pasting content. + +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Copy| Ctrl + C | ⌘+C | +| Cut| Ctrl + X | ⌘+X | +| Paste| 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. -You can use the following key shortcuts when the Rich Text Editor renders with Markdown edit mode. - -| Actions | Keyboard shortcuts | -|----------------|---------| -| Toolbar focus| Alt + f10 | -| Insert link| Ctrl + k | -| Insert image| Ctrl + Shift + i | -| Insert table| Ctrl + Shift + e | -| Undo| Ctrl + z | -| Redo| Ctrl + y | -| Copy| Ctrl + c | -| Cut| Ctrl + x | -| Paste| Ctrl + v | -| Bold| Ctrl + b | -| Italic| Ctrl + i | -| Strikethrough| Ctrl + Shift + s | -| Uppercase| Ctrl + Shift + u | -| Lowercase| Ctrl + Shift + l | -| Superscript| Ctrl + Shift + = | -| Subscript| Ctrl + = | -| Fullscreen| Ctrl + Shift + f | -| Ordered list| Ctrl + Shift + o | -| Unordered list| Ctrl + Alt + o | +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Fullscreen| Ctrl + Shift + F | ⌘+⇧+F | {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/keyboard-support.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/keyboard-support.md index 6e43eb4dbf..35b0deedbe 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/keyboard-support.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/keyboard-support.md @@ -15,45 +15,124 @@ The editor has full keyboard accessibility that includes shortcuts to open and o ## HTML Formation Shortcut Key -You can use the following key shortcuts when the Rich Text Editor renders with HTML edit mode. - -| Actions | Keyboard shortcuts | -|----------------|---------| -| Toolbar focus | Alt + f10 | -| Insert link | Ctrl + k | -| Insert image | Ctrl + Shift + i | -| Insert audio | Ctrl + Shift + a | -| Insert video | Ctrl + Alt + v | -| Insert table | Ctrl + Shift + e | -| Undo | Ctrl + z | -| Redo | Ctrl + y | -| Copy | Ctrl + c | -| Cut | Ctrl + x | -| Paste| Ctrl + v | -| Bold| Ctrl + b | -| Italic| Ctrl + i | -| Underline| Ctrl + u | -| Strikethrough| Ctrl + Shift + s | -| Inline Code | Ctrl + ` | -| Uppercase| Ctrl + Shift + u | -| Lowercase| Ctrl + Shift + l | -| Superscript| Ctrl + Shift + = | -| Subscript| Ctrl + = | -| Indents| Ctrl + ] | -| Outdents| Ctrl + [ | -| HTML source | Ctrl + Shift + h | -| Fullscreen| Ctrl + Shift + f | -| Exit Fullscreen| Esc | -| Justify center| Ctrl + e | -| Justify full | Ctrl + j | -| Justify left | Ctrl + l | -| Justify right | Ctrl + r | -| Clear format | Ctrl + Shift + r | -| Ordered list | Ctrl + Shift + o | -| Unordered list | Ctrl + Alt + o | -| Format Painter Copy| Alt + Shift + c | -| Format Painter Paste| Alt + Shift + v | -| Format Painter Escape | Esc | +You can use the following key shortcuts when the Rich Text Editor renders with `HTML` [editorMode](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EditorMode). + +### 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 | +|----------------|---------| --------- | +| Toolbar focus| Alt + F10 | ⌥ + F10 | +| Move to next tool | → | →, ⌘ + F | +| Move to 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| Ctrl + A | ⌘+ A | +| Insert new line | Enter | Enter | +| Insert a soft break (line break without starting a new paragraph) | Shift + Enter | ⇧+ Enter | +| Bold| Ctrl + B | ⌘ + B | +| Italic| Ctrl + I | ⌘ + I | +| Strikethrough| Ctrl + Shift + S | ⌘ + ⇧ + S | +| 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/aspnetcore-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 | +|----------------|---------| --------- | +| Insert table| Ctrl + Shift + E | ⌘ + ⇧+E | +| Insert image| Ctrl + Shift + I | ⌘+⇧+I | +| Insert audio | Ctrl + Shift + A | ⌘+⇧+A | +| Insert video | Ctrl + Alt + V | ⌘+⌥+V | + +### Table cell + +These shortcuts assist in navigating between table cells and managing table rows easily. + +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Move to the next cell | Tab | Tab | +| Move 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 | +|----------------|---------| --------- | +| Uppercase| Ctrl + Shift + U | ⌘+⇧+U | +| Lowercase| Ctrl + Shift + L | ⌘+⇧+L | +| Superscript| Ctrl + Shift + = | ⌘+⇧+= | +| 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 | +|----------------|---------| --------- | +| Justify center| Ctrl + E | ⌘+E | +| Justify full | Ctrl + J | ⌘+J | +| Justify left | Ctrl + L | ⌘+L | +| Justify right | Ctrl + R | ⌘+R | + +## List and Indentation + +These shortcuts help with creating and adjusting ordered and unordered lists, and modifying indentations. + +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Indents| Ctrl + ] | ⌘+] | +| Outdents| Ctrl + [ | ⌘+[ | +| Ordered list| Ctrl + Shift + O | ⌘+⇧+O | +| Unordered list| Ctrl + Alt + O | ⌘+⌥+O | + +### Clipboard Operations + +These shortcuts streamline copying, cutting, pasting, and pasting content as plain text. + +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Copy| Ctrl + C | ⌘+C | +| Cut| Ctrl + X | ⌘+X | +| Paste| 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 | +|----------------|---------| --------- | +| HTML source | Ctrl + Shift + H | ⌘+⇧+H | +| Fullscreen| Ctrl + Shift + F | ⌘+⇧+F | +| Exit Fullscreen| Esc | Esc | +| Clear format | Ctrl + Shift + R | ⌘+⇧+R | {% if page.publishingplatform == "aspnet-core" %} @@ -78,33 +157,87 @@ You can use the following key shortcuts when the Rich Text Editor renders with H {% endtabs %} {% endif %} +## Markdown Formation Shortcut Key +You can use the following key shortcuts when the Rich Text Editor renders with `Markdown` [editorMode](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EditorMode). -## Markdown Formation Shortcut Key +### Toolbar + +These shortcuts provide quick access to toolbar functions for managing menus and dialogs. + +| Actions | Windows | Mac | +|----------------|---------| ---------| +| Toolbar focus| 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| Ctrl + A | ⌘+ A | +| Insert new line | Enter | Enter | +| Bold| Ctrl + B | ⌘ + B | +| Italic| Ctrl + I | ⌘ + I | +| Strikethrough| Ctrl + Shift + S | ⌘ + ⇧ + S | + +### Inserting + +These shortcuts allow for the quick insertion of tables, links, and images. + +| Actions | Windows | Mac | +|----------------|---------| ---------| +| Insert table| Ctrl + Shift + E | ⌘ + ⇧+E | +| Insert link| Ctrl + K | ⌘+ K | +| Insert image| Ctrl + Shift + I | ⌘+⇧+I | + +### Text Manipulation + +These shortcuts help in modifying text case and applying superscript or subscript. + +| Actions | Windows | Mac | +|----------------|---------| ---------| +| Uppercase| Ctrl + Shift + U | ⌘+⇧+U | +| Lowercase| Ctrl + Shift + L | ⌘+⇧+L | +| Superscript| Ctrl + Shift + = | ⌘+⇧+= | +| Subscript| Ctrl + = | ⌘+= | + +## Lists + +These shortcuts enable the creation of ordered and unordered lists. + +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Ordered list| Ctrl + Shift + O | ⌘+⇧+O | +| Unordered list| Ctrl + Alt + O | ⌘+⌥+O | + +### Clipboard Operations + +These shortcuts facilitate copying, cutting, and pasting content. + +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Copy| Ctrl + C | ⌘+C | +| Cut| Ctrl + X | ⌘+X | +| Paste| 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. -You can use the following key shortcuts when the Rich Text Editor renders with Markdown edit mode. - -| Actions | Keyboard shortcuts | -|----------------|---------| -| Toolbar focus| Alt + f10 | -| Insert link| Ctrl + k | -| Insert image| Ctrl + Shift + i | -| Insert table| Ctrl + Shift + e | -| Undo| Ctrl + z | -| Redo| Ctrl + y | -| Copy| Ctrl + c | -| Cut| Ctrl + x | -| Paste| Ctrl + v | -| Bold| Ctrl + b | -| Italic| Ctrl + i | -| Strikethrough| Ctrl + Shift + s | -| Uppercase| Ctrl + Shift + u | -| Lowercase| Ctrl + Shift + l | -| Superscript| Ctrl + Shift + = | -| Subscript| Ctrl + = | -| Fullscreen| Ctrl + Shift + f | -| Ordered list| Ctrl + Shift + o | -| Unordered list| Ctrl + Alt + o | +| Actions | Windows | Mac | +|----------------|---------| --------- | +| Fullscreen| Ctrl + Shift + F | ⌘+⇧+F | {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index c6bdc2e031..74fa69f5ce 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -2298,7 +2298,7 @@
  • Iframe Rendering
  • Style and appearance
  • ExecCommand in Rich Text Editor
    • -
  • Keyboard support
    • +
  • Keyboard shortcuts
  • Accessibility
  • How To