Add keyboard shortcut to TinyMCE WordPress

• SOLVED

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

But it involves adding code to the TinyMCE source file, tiny_mce_src.js:

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

How can I add shortcuts outside of TinyMCE, e.g., in functions.php?


SpecificalIy am trying to add keyboard shortcuts to toggle header tags and execute other functions in TinyMCE.

This is a repost of [[LINK href="http://wordpress.stackexchange.com/questions/33444/how-to-add-tinymce-keyboard-shortcut"]]this question[[/LINK]] from WP StackExchange. The bainternet answer doesn't work because 1) the keyboard shortcut does not work if the cursor is in TinyMCE; and 2) I want the behavior to be the same as the native TinyMCE header buttons—so that you can apply them while the cursor is in the text but no text is selected.

I am using the hotkeys.js jQuery plugin. None of these bindings work:

// This works, but only when TinyMCE is not focused
$(document).bind('keydown', 'Alt+Shift+1', function(){
console.log('key pressed');
});

// Binding to the textarea like this doesn't work
$('textarea#content').bind('keydown', 'Alt+Shift+1', function(){
console.log('key pressed');
});

// Binding to the iframe like this doesn't work
$('.mceIframeContainer iframe').bind('keydown', 'Alt+Shift+1', function(){
console.log('key pressed');
});

// Binding to the iframe's body doesn't work
$(document).ready(function() {
$('.mceIframeContainer iframe').load(function() {
alert("Loaded");
$(this).contents().find("body").bind('keydown', 'Alt+Shift+1', function(){
console.log('key pressed');
});
});
});


Answers (3)

2012-05-21

Jurre Hanema answers:

Throw away the jQuery-hotkeys plugin and include this PHP-code somewhere in your site (e.g. functions.php):


add_filter('tiny_mce_before_init', 'wpq_tiny_mce_before_init', 10, 2);

function wpq_tiny_mce_before_init($mceInit, $editor_id)
{
if($editor_id == 'content')
{
$mceInit['oninit'] = 'wpq_tinymce_add_shortcuts';
}

return $mceInit;
}


Now, in your Javascript, you need to define the function wpq_tinymce_add_shortcuts. This function is going to add the shortcuts to TinyMCE, using the addShortcut()-function like on [[LINK href="http://www.lifeinsuranceonmyterms.com/other/custom-keyboard-shortcuts-for-tinymce-how-to"]]the howto you referred to[[/LINK]]. I assume you know how to include the Javascript in your site. The script should look like this:


function wpq_tinymce_add_shortcuts()
{
// Add your shortcuts here...
window.tinymce.activeEditor.addShortcut('ctrl+m', 'foobar', 'Bold');
}


If everything works, this example should add ctrl+m as a shortcut for "bold".

I created and tested this on Wordpress 3.3. I do not know if it works on earlier versions, so I suggest you try it on WP 3.3 first.

---

web559 comments:

Thanks so much for your answer. I'm not sure I actually do know where to add the javascript defining wpq_tinymce_add_shortcuts. I added it in a script tag in the footer and am getting TypeError: 'undefined' is not an object (evaluating 'v.apply') IN wp-tinymce.php:2

---

Jurre Hanema comments:

That probably means that you did not (properly) include the script on the relevant page of the Wordpress admin.

The way I included the script for my test was by adding it using functions.php like this:


add_action('admin_footer', 'wpq_tiny_mce_shortcuts_script');

function wpq_tiny_mce_shortcuts_script()
{
?>
<script type="text/javascript">
function wpq_tinymce_add_shortcuts()
{
window.tinymce.activeEditor.addShortcut('ctrl+m', 'foobar', 'Bold');
}
</script>
<?php
}


A better way to do it would be to use [[LINK href="http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts"]]admin_enqueue_script[[/LINK]], but this is the easiest way for a quick test.

---

web559 comments:

Thanks so much. This worked great. I'm glad to have this finally solved.

2012-05-21

Francisco Javier Carazo Gil answers:

Take a look at jquery.hotkeys plugin which lets you enable keyboard shortcuts with a simple one liner:

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

To do it better, 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 + '>');
}
}
}

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

---

web559 comments:

Dude, read my question. This is a direct copy of the StackExchange answer, which I said didn't work ;)

2012-05-21

Agus Setiawan answers:

use this : http://wordpress.stackexchange.com/questions/33444/how-to-add-tinymce-keyboard-shortcut

hope this usefull.

---

web559 comments:

I link to and comment on that StackExchange question in my question above.