public
Created

Keyboard shortcuts for HTML editor in WordPress

  • Download Gist
index.php
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
<?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
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162
/*
* 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
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
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();
}
}
 
};

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.