Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Restrict keyboard shortcuts in TinyMCE editor

Tags:

jquery

tinymce

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.

like image 328
RedWolves Avatar asked Jan 09 '10 17:01

RedWolves


People also ask

How do I assign keyboard shortcuts in Visual Studio?

Customize a keyboard shortcutOn the menu bar, choose Tools > Options. Expand Environment, and then choose Keyboard.

How do I use TinyMCE init?

Initialize TinyMCE 5 on any element (or elements) on the web page by passing an object containing a selector value to tinymce. init() . The selector value can be any valid CSS selector. For example: To replace <textarea id="mytextarea"> with a TinyMCE 5 editor instance, pass the selector '#mytextarea' to tinymce.


2 Answers

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.

like image 56
Amyth Avatar answered Nov 04 '22 04:11

Amyth


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.

like image 40
Doug Neiner Avatar answered Nov 04 '22 05:11

Doug Neiner