Keyboard Support in EJ 1 Angular RichTextEditor

7 Jun 2017 / 2 minutes to read

The editor has full keyboard accessibility that includes shortcuts to open and other actions with toolbar items, drop-down lists, and dialogs.

Press	To do this
`Arrow keys`	When a toolbar is focused Move between options in an open drop-down list
`Enter`	Execute the selected button, drop-down item
`ESC`	Cancel an action or close the dialog
`HOME` `END`	Go to first/last of the line
`CTRL` + `HOME` `CTRL` + `END`	Go to the beginning/end of a content
`PAGE UP` `PAGE DOWN`	Scroll up/down page in the content
`CTRL` + `A`	Select all content
`CTRL` + `C`	Copy the selected text or image
`CTRL` + `X`	Cut the selected text
`CTRL` + `V`	Paste text or image
`CTRL` + `Z`	Undo the last action
`CTRL` + `Y`	Redo the last action
`CTRL` + `U`	Applies underline format with the selected content.
`CTRL` + `I`	Applies italic format with the selected content.
`CTRL` + `B`	Applies bold format with the selected content.
`CTL`+`SHIFT`+`S`	Applies strike format with the selected content.
`CTRL`+`K`	Opens hyperlink dialog for attaching the hyperlink with the selected content.
`CTRL`+`SHIFT`+`K`	Removes hyperlink from the selected content.
`CTRL`+`E`	Justify center.
`CTRL`+`J`	Justify Full.
`CTRL`+`L`	Justify Left.
`CTRL`+`R`	Justify Right.
`CTRL`+`M`	Increases the indent of the focused content.
`CTRL`+`SHIFT`+`M`	Decreases the indent of the focused content.
`CTRL` +`SHIFT`+`H`	Opens the HTML source of the editor content.
`CTRL`+ `SHIFT` +`I`	Inserts or edit image with editor content.
`CTRL`+`SHIFT`+`V`	Inserts video to the content.
`CTRL`+ `SHIFT` +`F`	Expands the editor area to full screen mode.
`CTRL`+`SHIFT`+`R`	Clear text formats from the selected content.
`CTRL`+`SHIFT`+`C`	Opens custom table dialog, to insert a customized table with the content.
`CTRL`+`SHIFT`+`E`	Opens edit table dialog, for editing the table property.
`CTRL`+`SHIFT`+`LEFT`	Inserts a column before the focused cell.
`CTRL`+`SHIFT`+`RIGHT`	Inserts a column after the focused cell.
`CTRL`+`SHIFT`+`UP`	Inserts a row above the focused cell.
`CTRL`+`SHIFT`+`DOWN`	Inserts a row below the focused cell.
`CTRL`+`ALT`+`C`	Removes focused column from the table.
`CTRL`+`ALT`+`R`	Removes focused row from the table.
`CTRL`+`ALT`+`A`	Deletes entire Table
`CTRL`+`SHIFT`+`<`	Decrease font size for the selected content.
`CTRL`+`SHIFT`+`>`	Increase font size for the selected content.
`CTRL`+`SHIFT`+`L`	Replaces the selected content to lowercase content.
`CTRL`+`SHIFT`+`U`	Replaces the selected content to uppercase content.
`CTRL`+`SHIFT` +`=`	Enables the superscript with the selected content.
`CTRL` +`=`	Enables the subscript with the selected content.
`CTRL`+`SHIFT`+`O`	Inserts the ordered list element with the selected content.
`CTLR` +`ALT`+`O`	Inserts the unordered list element with the selected content.
`CTRL`+`F10`	Clears the entire editor content.

To disable the keyboard navigation, set the allowKeyboardNavigation property of the editor to false (its default value is true). It will disable all the keyboard navigation shortcuts except for the UP/DOWN keys and PAGE UP/PAGE DOWN keys.

html

<textarea id="texteditor" ej-rte [value]="val" [allowKeyboardNavigation]="false"></textarea>

html

import {Component} from '@angular/core';

@Component({
  selector: 'sd-home',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    val: string; 
    constructor() {
        this.val = "The RichTextEditor (RTE) control enables you to edit the contents with insert table and images," + " it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea.",
    }
}

Note: In order to make the tab key for form element navigation –disable the enableTabKeyNavigation property.