How to add TinyMCE keyboard shortcut|Programmer puzzle solving

The most thorough documentation I can find of how to add a new keyboard shortcut to TinyMC is at this page:

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.

The most thorough documentation I can find of how to add a new keyboard shortcut to TinyMC is at this page: http://www.lifeinsuranceonmyterms/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 edited Nov 11, 2011 at 7:19 asked Nov 10, 2011 at 17:28 supertrue 3,01610 gold badges46 silver badges60 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 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'));

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

wptuts Adding the button
TinyMCE documentation about adding a shortcut

Programmer puzzle solving

How to add TinyMCE keyboard shortcut

2 Answers 2

Articles related to this article

comment list (0)