How to add TinyMCE keyboard shortcut

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):

Read More
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.

Related posts

Leave a Reply

2 comments

  1. 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'));
    
  2. 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