tags:

views:

487

answers:

3

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.

+2  A: 

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.

Doug Neiner
I updated my answer to include a sample on how to disable the shortcuts you didn't want.
Doug Neiner
Well, this answer doesn't leave anything to be desired. :) Withdrawing mine. +1
Pekka
@Pekka well, thanks :) At first I thought the source had to be edited, but their shortcut system is actually pretty cool.
Doug Neiner
This seems to work great in Firefox but it doesn't seem to work in Safari, Chrome and IE. Seems like I can't override the browser defaults. Any ideas on that?
RedWolves
@RedWolves Is none of it working? Or are just ctrl+i and ctrl+u not working since they have a browser implementation?
Doug Neiner
Ok, so I did a bit of testing in just Safari, and I was unable to block the italic shortcut. Granted, I really don't know much about the dynamic editing modes of Safari and IE. Sorry :(
Doug Neiner
+1  A: 

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.

RedWolves
A: 

Hi, I am having challenge in removing short cut keys in IE with TinyMCE Editor. I am using below code

tinyMCE.init({ mode : "textareas", theme : "advanced", theme_advanced_buttons1 :"bold,justifyleft,justifycenter,justifyright" ,//"bold,italic,underline,|,justifyleft,justifycenter,justifyright", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", height : "325", content_css : "content.css",

setup : function(ed){ removeShortCuts();}

});

function removeShortCuts(ed){ //alert(navigator.appName);

if(navigator.appName == "Netscape"){ 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]; //} } } }

// Added below for IE

if(navigator.appName == "Microsoft Internet Explorer") {

var $iframe = $('iframe').contents().get(0); //HERE PROBLEM OBJECT EXPECTED

 $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; 
    } 
});

} }

Can some one help me to resolve this?

Thanks in advance.

Swapnil
Welcome to StackOverflow, @Swapnil! Please post this as a question instead of an answer. The FAQ will help you get started: http://stackoverflow.com/faq
ZoogieZork