How to add TinyMCE keyboard shortcut

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'));

Leave a Comment