Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

The most thorough documentation I can find of how to add a new keyboard shortcut to TinyMC is at this page: http://www.lifeinsuranceonmyterms.com/other/custom-keyboard-shortcuts-for-tinymce-how-to

It involves adding this code to the main TinyMCE source file, tiny_mce_src.js (and then recompressing):

t.addShortcut([keyboard command], [shortcut name], [command name]);

Is there a way to add a shortcut without hacking the core/TinyMCE?

Update: Specifically, I want to add shortcuts to apply h2/h3/h4 or other TinyMCE button actions to selected text in TinyMCE.

share|improve this question

2 Answers 2

Last time i added a keybord shortcut it was using jQuery. take a look at jquery.hotkeys plugin which lets you enable keyboard shortcuts with a simple one liner:

$(document).bind('keydown', 'ctrl+a', fn);

update

if you want to check if the TinyMCE editor is active and it has a selected text then here are the functions you need:

function isTinyMCEactive(){ //check if editor is active
    is_tinyMCE_active = false;
    if (typeof(tinyMCE) != "undefined") {
        if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
            is_tinyMCE_active = true;
        }
    }
    return is_tinyMCE_active;
}

function tinyMCEhotkeys(tag){
    if (isTinyMCEactive()){
        var selected_content = '';
        selected_content = tinyMCE.activeEditor.selection.getContent();
        if (selected_content != '' || selected_content != null){ //check if editor has selection
            tinyMCE.activeEditor.execCommand("mceInsertContent", 0, '<' + tag + '>' + selected_content + '</' + tag + '>');
        }
    }
}

now once you have these functions the rest is easy:

$(document).bind('keydown', 'ctrl+1', tinyMCEhotkeys('h1'));
$(document).bind('keydown', 'ctrl+2', tinyMCEhotkeys('h2'));
$(document).bind('keydown', 'ctrl+3', tinyMCEhotkeys('h3'));
$(document).bind('keydown', 'ctrl+4', tinyMCEhotkeys('h4'));
share|improve this answer
    
In this case I'm trying to add a keyboard shortcut specific to TinyMCE. I.e. shortcuts for each header (h1/h2/h3/h4) when text is selected in the TinyMCE editor. –  supertrue Nov 11 '11 at 7:15

I had this problem. And figured it out. Hope it still helps (someone) #Threadnecro

in functions.php I add a tinyMCE plugin:

function mce_button_js( $plugin_array ) {
  $plugin_array['notes'] = get_template_directory_uri() . '/js/tinymce.js';
  return $plugin_array;
}
add_filter( 'mce_external_plugins', 'mce_button_js' );

the file /js/tinymce.js has:

(function() {
  tinymce.create('tinymce.plugins.Notes', {
    init: function(ed, url) {
      ed.addButton('code', {
        title: 'Code',
        cmd: 'code'
      });

      // here I add the shortcut.
      ed.addShortcut('ctrl+k', 'description', 'code');
      ed.addCommand('code', function() {
        var selected_text = ed.selection.getContent(),
          $node = jQuery(ed.selection.getStart()),
          return_text = '';

        if (selected_text !== "") {
          return_text = '<code>' + selected_text + '</code>';
        }
        ed.execCommand('mceInsertContent', 0, return_text);
      });
    }
  });
  // Register plugin
  tinymce.PluginManager.add('notes', tinymce.plugins.Notes);
})();

This adds a code button to the wysiwyg editor. And it maps ctrl+k as hotkey for that action.

Sources

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.