It needs a bit of javascript to do that. You need a listener and some actions. Here we go…
At first enqueueing the javascript to the post and post new screens:
PHP:
add_action( 'plugins_loaded', 'keyboradshortcuts4htmleditor', 10, 0 );
function keyboradshortcuts4htmleditor(){
add_action( 'admin_print_scripts-post-new.php', 'keyboradshortcuts4htmleditor_enqueue_javascript', 10, 0 );
add_action( 'admin_print_scripts-post.php', 'keyboradshortcuts4htmleditor_enqueue_javascript', 10, 0 );
}
function keyboradshortcuts4htmleditor_enqueue_javascript(){
wp_enqueue_script(
'keyboradshortcuts4htmleditor',
plugins_url( 'keyboradshortcuts4htmleditor.js', __FILE__ ),
array( 'jquery', 'keyboradshortcuts4htmleditor_selection' ),
false,
true
);
wp_enqueue_script(
'keyboradshortcuts4htmleditor_selection',
plugins_url( 'selection.js', __FILE__ ),
array( 'jquery' ),
false,
true
);
}
The second javascript is a small snippet to get the selected text from the textarea. No more words about it.
That was quite simple. Now the difficult part. We need a javascript which listen to the keyboard and do some actions on a specific keypress. This should only happend when a key inside the textarea (editor) is pressed. We use jQuerys .keypress() method and bind it to the textarea (id ‘#content’ ): jQuery( '#content' ).keypress( ... )
Now we have to check if a specific key was pressed and trigger that action. I use a simple array as keymap (keycode -> function to do) and call the function with eval().
In your actions you have to check if a text is selected or not and deal with it. The following script is a rough draft! You have to understand what happend there and define our own shortcuts. The script have to be refacotred, I am not a javascript expert.
JavaScript:
/*
* KeyBoardShortCuts4HTMLEditor
*
* @author: Ralf Albert
*
*/
( function( ) {
keymap = null;
KeyBoardShortCuts4HTMLEditor = {
textarea_id: 'content',
tags_open: [],
init: function(){
kbsc = this;
kbsc.keymap = kbsc.initKeymap();
jQuery( '#' + kbsc.textarea_id ).keypress(
function( event ){
var key = event.which;
// debugging & Development
//console.log( 'Keypress: ' + key );
if( 'undefined' !== kbsc.keymap[key] ){
callFunction = kbsc.keymap[key];
}
try{
eval( 'kbsc.' + callFunction + '();' );
} catch (e) {} finally {};
}
);
},
initKeymap: function(){
var keymap = [];
keymap[63] = 'help';
keymap[66] = 'bold';
keymap[73] = 'italic';
return keymap;
},
insertAtCaret: function( text ){
Selector.insertAtCaret( kbsc.textarea_id, text );
return;
},
openCloseTags: function( selected, tag ){
if( undefined === selected.lenght ) {
if( undefined === kbsc.tags_open[tag.id] || null === kbsc.tags_open[tag.id] ){
kbsc.tags_open[tag.id] = true;
kbsc.insertAtCaret( tag.open );
} else {
kbsc.tags_open[tag.id] = null;
kbsc.insertAtCaret( tag.close );
}
return true;
}
return false;
},
help: function(){
var helpstr="";
for( var i in kbsc.keymap ){
var key = String.fromCharCode(i);
helpstr = helpstr + key + ': ' + kbsc.keymap[i] + '\n';
}
alert( helpstr );
return;
},
bold: function (){
var tag = {
id: 'bold',
open: '<b>',
close: '</b>'
};
var selected = Selector.getSelection( kbsc.textarea_id );
if( undefined === selected.length || 0 === selected.length ) {
kbsc.openCloseTags(
selected,
tag
);
} else {
Selector.replaceSelection( kbsc.textarea_id, tag.open + selected.text + tag.close );
}
},
italic: function(){
var tag = {
id: 'italic',
open: '<i>',
close: '</i>'
};
var selected = Selector.getSelection( kbsc.textarea_id );
if( undefined === selected.length || 0 === selected.length ) {
kbsc.openCloseTags(
selected,
tag
);
} else {
Selector.replaceSelection( kbsc.textarea_id, tag.open + selected.text + tag.close );
}
}
};
KeyBoardShortCuts4HTMLEditor.init();
} )( jQuery );
You can found the complete files in this gist.