Restrict keyboard shortcuts in TinyMCE editor

Question

Trying to find where to disable individual keyboard shortcuts in the jQuery version of TinyMCE editor. Currently the list of allowable shortcuts is:

• ctrl+z Undo
• ctrl+y Redo
• ctrl+b Bold
• ctrl+i Italic
• ctrl+u Underline
• ctrl+1-6 h1-h6
• ctrl+7 p
• ctrl+8 div
• ctrl+9 address

Currently looking to disable all shortcuts but Undo, Redo and bold. The rest are unnessary in our implementation due to it's unwanted formatting.

I can't seem to find the code that enables these shortcuts. Can you point out where to find this code.

Answer 1

Disable Tested in Firefox

This should help get you started. You might need to actually add empty shortcuts for ctrl+u and ctrl+i to disable it in other browsers, but this code has been tested to disable the actions in Firefox. Just run after the initialization of tinyMCE has run (I tested mine in Firebug):

for(var i in tinyMCE.editors){
  var editor = tinyMCE.editors[i];
  for(var s in editor.shortcuts){
    var shortcut = editor.shortcuts[s];
    // Remove all shortcuts except Bold (66), Redo (89), Undo (90)
    if(!(s == "ctrl,,,66" || s == "ctrl,,,89" || s == "ctrl,,,90")){
       // This completely removes the shortcuts
       delete editor.shortcuts[s];

       // You could use this instead, which just disables it, but still keeps
       // browser functionality (like CMD+U = show source in FF Mac) from interrupting the flow
       // shortcut.func = function(){  };
    }
  }
}

Background

It appears to be defined around line 2294 of jscripts/tiny_mce/classes/Editor.js (From the full development download).

Also, they are stored in an array in the Editor.shortcuts variable. They keys are setup with special chars then the keycode, like this: ctrl,,,90.

But from what I can tell, it seems that many browser implement their own versions of ctrl+b, ctrl+i, and ctrl+u and that only Gecko browsers do not:

// Add default shortcuts for gecko
if (isGecko) {
    t.addShortcut('ctrl+b', t.getLang('bold_desc'), 'Bold');
    t.addShortcut('ctrl+i', t.getLang('italic_desc'), 'Italic');
    t.addShortcut('ctrl+u', t.getLang('underline_desc'), 'Underline');
}

But if you look around there, you can see how they enable it.

Additionally, look into the Editor.addShortcut method. You might be able to override the default behavior.

Answer 2

Even though this has an accepted answer, I would share what I use with tinymce4. You can simply add editor.addShortcut('ctrl+u', "", "") to the init event method within the setupmethod, which will override the added shortcut

Example:

tinyMCE.init({
    // Your options here
    setup: function(editor) {
        editor.on("init", function(){
            editor.addShortcut("ctrl+u", "", "");
        });
    }
})

You can replace any shortcut you'd like to disable with ctrl+u in the above code.

Answer 3

OK so I was able to get this to work. I was able to block firefox using Doug's code above to get IE to disable the key's I wanted I had to add this code after Doug's code block.

var $iframe = $('iframe').contents().get(0);

$($iframe).keydown(function(oEvent) {
    //italics (ctrl+i & Cmd+i [Safari doesn't allow you to test for Cmd])
    if (oEvent.keyCode == '73' && (oEvent.metaKey || oEvent.ctrlKey)){
        oEvent.preventDefault();
        return false;
    }

    //underline (ctrl+u & cmd+u [Safari doesn't allow you to test for cmd])
    if (oEvent.keyCode == '85' && (oEvent.metaKey || oEvent.ctrlKey)){
        oEvent.preventDefault();
        return false;
    }
});

So basically TinyMCE dynamically loads the editor as a iFrame so I disabled the Ctrl+u and Ctrl+i from the iFrame. I what till the iFrame is finished loading and then attach a keydown event and sniff for Ctrl+i and Ctrl+i (I also sniff Cmd+i and Cmd+u for the mac [although Safari won't let you test for cmd according to this link. Everything else is disabled that I need disabled.

Answer 4

Example code to switch back and forth from allowing I B and U in both IE and FF.

var ctrlKey = false;

function removeShortcuts(){
  var e = tinyMCE.activeEditor;
  for (var s in e.shortcuts){
    if(s=="ctrl,,,73" || s=="ctrl,,,85" || s="ctrl,,,66"){
      e.shortcuts[s].func = function(){};
    }
  }
  e.onKeyUp.add(onKeyUp);
  e.onKeyDown.add(onKeyDown);
}

function resetShortcuts(){
  var e = tinyMCE.activeEditor;
  if (isGecko) {
    e.addShortcut('ctrl+b', t.getLang('bold_desc'), 'Bold');
    e.addShortcut('ctrl+i', t.getLang('italic_desc'), 'Italic');
    e.addShortcut('ctrl+u', t.getLang('underline_desc'), 'Underline');
  }
  e.onKeyUp.remove(onKeyUp);
  e.onKeyDown.remove(onKeyDown);
}


function onKeyUp(editor, event){
  if(event.keyCode == 17){
    ctrlKey = false;
  }
}

function onKeyDown(editor, event){
  if(event.keyCode == 17){
    ctrlKey = true;
  }
  if(ctrlKey && (event.keyCode == 73 || event.keyCode == 85 || event.keyCode == 66){
    tinymce.dom.Event.cancel(event);
  }
}

Answer 5

For TinyMCE v4: List of keyboard shortcuts available within the editor body

tinyMCE.init({       
    setup: function(editor) {
        editor.on("init", function(){
            editor.shortcuts.remove('meta+u', '', ''); // "meta" maps to Command on Mac and Ctrl on PC          
        });
    }
})