Overriding shortcut assignments in Tinymce

Question

I am using Tinymce in an application that displays an html document and allows the user to annotate it.

I have created a number of plugins and attached my own shortcuts to it. I also created my own handlers for Bold, Italic and Underline by commenting out the assignments in the tinymce javascript and creating my own.

However there are a few shortcuts that I can't seem to use.

I am using the addShortcut call. For example, CTRL-O brings up a standard file open window no matter how I try to override it. I can assign CTRL-SHIFT-O and that works fine.

I also want to be able to override the default behavior for shortcuts that the browser uses like CTRL-R for refresh. Our primary user is heavily into using keyboard shortcuts and is afraid that he will accidentally hit CTRL-R which could refresh the page and lose unsaved work.

Is there a way to override or intercept the CTRL-R before it gets to the browser?

Thanks in advance for any assistance.

rob c rob c · Accepted Answer · 2013-11-07T13:04:54

I actually found a way to solve this problem from a another post on StackOverflow that gives me full control of all keystrokes and lets me easily trap any shortcuts I want. This successfully overrided the CTRL-R for refresh and the CTRL-O for Open. I made a few mods to the example code but a huge thanks to hims056 for the solution. his response along with some other helpful examaples can be found at:

Overriding Browser's Keyboard Shortcuts

Below is my version of the code:

tinymce.init({
    selector: "textarea#elm1",
    theme: "modern",
    statusbar: false,
    width: "100%",
    height: "95%",
    plugins: ["print preview"],
    content_css: "css/content.css",

    ...

    setup: function(ed)
    {
        ed.on("keyup", function(e) {
        console.debug('Key up event: ' + e.keyCode);
            overrideKeyboardEvent(e);
        });

        ed.on("keydown", function( e) {
            console.debug('Key down event: ' + e.keyCode);
            overrideKeyboardEvent(e);
    });

<script type="text/javascript">

document.onkeydown = overrideKeyboardEvent;
document.onkeyup = overrideKeyboardEvent;
var keyIsDown = {};

function overrideKeyboardEvent(e){
  var returnVal = true; 

  switch(e.type){
    case "keydown":
      if(!keyIsDown[e.keyCode]){
        keyIsDown[e.keyCode] = true;
        // check if they selected ctrl-r which will refresh the screen
        if (keyIsDown[17])
        {
            switch (e.keyCode)
            {
            case 82:    // CTRL-R refreshes the screen!  Don't want to do that!
                 e.stopPropagation();
                 e.preventDefault();
                 returnVal = false; // false means don't propagate
                break;
            case 79:    // CTRL-O by default opens an open File Dialog.  
                 e.stopPropagation();
                 e.preventDefault();
                 returnVal = false; // false means don't propagate

                 // call openDocument
                 loadDocument(false);
                 break;
            case 68:    // CTRL-D by default opens up the Bookmark Editor in Chrome.  We want to start a comment!
                 e.stopPropagation();
                 e.preventDefault();    
             returnVal = false; // false means don't propagate  
             createComment();
             break;
        }

        }       
    }
    break;
    case "keyup":
       delete(keyIsDown[e.keyCode]);
       // do key up stuff here
       break;
    }

  return returnVal;
}

Open to other suggestions, improvements, comments, etc.

Regards,

Rob

Overriding shortcut assignments in Tinymce

1 Answers