New to Kendo UI for jQuery? Download free 30-day trial

Implement Editor Shortcuts to Indent or Outdent a List

Environment

Product Progress® Kendo UI® Editor for jQuery
Operating System Windows 10 64bit
Browser All

Description

How can I use Tab and Shift+Tab as shortcuts to indent or outdent an ordered list in the Kendo UI Editor?

Solution

  1. Handle the keydown event of the Kendo UI Editor.
  2. Subscribe for the keyCode (9) of the Tab key.
  3. Prevent the default operation.
  4. Check if the Shift key is pressed.
  5. Use the exec method to trigger the outdent command. Otherwise, use the same method and trigger the indent command.
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  keydown: function(e) {
    if(e.keyCode == 9) {
        if(e.shiftKey) {
           e.sender.exec("outdent");
        }
        else {
           e.sender.exec("indent");
        }      
        e.preventDefault();
    }
  }
});
</script>

In this article