Keyboard shortcuts for HTML editor in WordPress

index.php

<?php
/**
 * Plugin Name:	Keyboardshortcuts for html editor
 * Plugin URI:	http://yoda.neun12.de
 * Description:	Adding keyboardshortcuts to the html editor
 * Version: 	0.1
 * Author: 		Ralf Albert
 * Author URI: 	http://yoda.neun12.de
 * Text Domain:
 * Domain Path:
 * Network:
 * License:		GPLv3
 */

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

}

keyboradshortcuts4htmleditor.js

/*
 * 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 );

selector.js

var Selector = {

	getSelection: function( id ){

		var e = document.getElementById( id );

		// Mozilla and DOM 3.0
		if ('selectionStart' in e) {
			var l = e.selectionEnd - e.selectionStart;
			return {
				start : e.selectionStart,
				end : e.selectionEnd,
				length : l,
				text : e.value.substr(e.selectionStart, l)
			};
		}

		// IE
		else if (document.selection) {
			e.focus();
			var r = document.selection.createRange();
			var tr = e.createTextRange();
			var tr2 = tr.duplicate();
			tr2.moveToBookmark(r.getBookmark());
			tr.setEndPoint('EndToStart', tr2);
			if ((r == null) || (tr == null)) {
				return {
					start : e.value.length,
					end : e.value.length,
					length : 0,
					text : ''
				};
			}
			var text_part = r.text.replace(/[\r\n]/g, '.'); // for some reason IE
															// doesn't always count
															// the \n and \r in the
															// length
			var text_whole = e.value.replace(/[\r\n]/g, '.');
			var the_start = text_whole.indexOf(text_part, tr.text.length);
			return {
				start : the_start,
				end : the_start + text_part.length,
				length : text_part.length,
				text : r.text
			};
		}

		// Browser not supported
	 else {
			return {
				start : e.value.length,
				end : e.value.length,
				length : 0,
				text : ''
			};
		}

	},

	replaceSelection: function ( id, replacement ) {

		var e = document.getElementById( id );

		selection = this.getSelection( id );

		var start_pos = selection.start;
		var end_pos = start_pos + replacement.length;

		e.value = e.value.substr(0, start_pos) + replacement
				+ e.value.substr(selection.end, e.value.length);

		this.setSelection( id, start_pos, end_pos );

		return {
			start : start_pos,
			end : end_pos,
			length : replacement.length,
			text : replacement
		};

	},

	setSelection: function ( id, start_pos, end_pos) {

		var e = document.getElementById( id );

		// Mozilla and DOM 3.0
		if ('selectionStart' in e) {
			e.focus();
			e.selectionStart = start_pos;
			e.selectionEnd = end_pos;
		}

		// IE
		else if (document.selection) {
			e.focus();
			var tr = e.createTextRange();

			// Fix IE from counting the newline characters as two seperate
			// characters
			var stop_it = start_pos;
			for ( var i = 0; i < stop_it; i++) {
				if (e.value[i].search(/[\r\n]/) != -1){start_pos = start_pos - .5;}
			}
			stop_it = end_pos;
			for (i = 0; i < stop_it; i++) {
				if (e.value[i].search(/[\r\n]/) != -1){end_pos = end_pos - .5;}
			}

			tr.moveEnd('textedit', -1);
			tr.moveStart('character', start_pos);
			tr.moveEnd('character', end_pos - start_pos);
			tr.select();
		}

		return get_selection( id );

	},

	wrapSelection: function ( id, left_str, right_str, sel_offset, sel_length ) {

		var the_sel_text = get_selection(id).text;
		var selection = replace_selection(id, left_str + the_sel_text
				+ right_str);

		if (sel_offset !== undefined && sel_length !== undefined){selection = set_selection(id, selection.start + sel_offset,
				selection.start + sel_offset + sel_length);}
		else if (the_sel_text == ''){selection = set_selection(id, selection.start + left_str.length,
				selection.start + left_str.length);}

		return selection;

	},

	insertAtCaret: function( id, text) {

		var e = document.getElementById( id );

        if (document.selection) {

                e.focus();
                sel = document.selection.createRange();
                sel.text = text;
                e.focus();
        }
        else if (e.selectionStart || (e.selectionStart == '0')) {

            var startPos = e.selectionStart;
            var endPos = e.selectionEnd;
            var scrollTop = e.scrollTop;
            e.value = e.value.substring(0, startPos)+text+e.value.substring(endPos,e.value.length);
            e.focus();
            e.selectionStart = startPos + text.length;
            e.selectionEnd = startPos + text.length;
            e.scrollTop = scrollTop;
        } else {

            e.value += text;
            e.focus();
        }
    }

};