Add keyboard Shortcuts To CKEditor

 

With Josh's (gpEasy's developer) help I've gotten the keyboard shortcuts to work properly in gpEasy 2+ along with shortcuts for headings. 

We no longer add the keystrokes to the /include/js/ckeditor_config.js file. Now we modify the /include/js/inline_edit/inlineck.js file. Open that file and find the following code:

a.extraPlugins="

There will be a list of CKEditor plugins aster the quotation mark. Make sure that watever plugins are already listed there are included. In the current version of gpEasy (2.2) the code is as follows:

a.extraPlugins="gpautogrow";

We are going to change it and add several plugins so we can have keyboard shortcuts for headings. We are going to add the following plugins: heading-h1, heading-h2, heading-h3, heading-h4, heading-h5, and heading-h6. The code should now look like this:

a.extraPlugins="gpautogrow,heading-h1,heading-h2,heading-h3,heading-h4,heading-h5,heading-h6";

Now we can add the keyboard shortcuts just after the above code in the /include/js/inline_edit/inlineck.js file. 

a.keystrokes=[
// Formatting
[ CKEDITOR.CTRL + 81 /*Q*/, 'blockquote' ],
[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ],
[ CKEDITOR.CTRL + 56 /*8*/, 'bulletedlist' ],
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 56 /*8*/, 'bulletedListStyle' ],
// COMMAND FOR HEADINGS via button plugins
[ CKEDITOR.CTRL + 49 /*1*/, 'heading-h1' ],
[ CKEDITOR.CTRL + 50 /*2*/, 'heading-h2' ],
[ CKEDITOR.CTRL + 51 /*3*/, 'heading-h3' ],
[ CKEDITOR.CTRL + 52 /*4*/, 'heading-h4' ],
[ CKEDITOR.CTRL + 53 /*5*/, 'heading-h5' ],
[ CKEDITOR.CTRL + 54 /*6*/, 'heading-h6' ],
[ CKEDITOR.CTRL + 77 /*M*/, 'indent' ],
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 77 /*M*/, 'outdent' ],
[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ],
[ CKEDITOR.CTRL + 74 /*J*/, 'justifyblock' ],
[ CKEDITOR.CTRL + 69 /*E*/, 'justifycenter' ],
[ CKEDITOR.CTRL + 76 /*L*/, 'justifyleft' ],
[ CKEDITOR.CTRL + 82 /*R*/, 'justifyright' ],
[ CKEDITOR.CTRL + 55 /*7*/, 'numberedlist' ],
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 55 /*7*/, 'numberedListStyle' ],
[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ],
[ CKEDITOR.CTRL + 32 /*SPACE*/, 'removeFormat' ],
[ CKEDITOR.CTRL + 65 /*A*/, 'selectall' ],
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 88 /*X*/, 'strike' ],
[ CKEDITOR.CTRL + 188 /*COMMA*/, 'subscript' ],
[ CKEDITOR.CTRL + 190 /*PERIOD*/, 'superscript' ],
[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ],
[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ],
// Insert
[ CKEDITOR.ALT + 65 /*A*/, 'anchor' ],
[ CKEDITOR.ALT + 68 /*D*/, 'creatediv' ],
[ CKEDITOR.ALT + CKEDITOR.SHIFT + 68 /*D*/, 'editdiv' ],
[ CKEDITOR.ALT + 70 /*F*/, 'flash' ],
[ CKEDITOR.ALT + 72 /*H*/, 'horizontalrule' ],
[ CKEDITOR.CTRL + 57 /*9*/, 'image' ],
[ CKEDITOR.ALT + 73 /*I*/, 'image' ],
[ CKEDITOR.CTRL + 75 /*K*/, 'link' ],
[ CKEDITOR.ALT + 76 /*L*/, 'link' ],
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 75 /*K*/, 'unlink' ],
[ CKEDITOR.ALT + CKEDITOR.SHIFT + 76 /*L*/, 'unlink' ],
[ CKEDITOR.CTRL + 13 /*ENTER*/, 'pagebreak' ],
[ CKEDITOR.ALT + 13 /*ENTER*/, 'pagebreak' ],
[ CKEDITOR.ALT + 86 /*V*/, 'pastetext' ],
[ CKEDITOR.ALT + CKEDITOR.SHIFT + 86 /*V*/, 'pastefromword' ],
[ CKEDITOR.ALT + 69 /*E*/, 'smiley' ],
[ CKEDITOR.ALT + 67 /*C*/, 'specialchar' ],
[ CKEDITOR.ALT + 84 /*T*/, 'table' ],
[ CKEDITOR.ALT + 79 /*O*/, 'templates' ],
// Other - dialogs, views, etc.
[ CKEDITOR.ALT + 8 /*Backspace*/, 'blur' ],
[ CKEDITOR.ALT + CKEDITOR.SHIFT + 67 /*C*/, 'colordialog' ],
[ CKEDITOR.ALT + 77 /*M*/, 'contextMenu' ],
[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ],
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 70 /*F*/, 'find' ],
[ CKEDITOR.ALT + 88 /*X*/, 'maximize' ],
[ CKEDITOR.CTRL + 113 /*F2*/, 'preview' ],
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 80 /*P*/, 'print' ],
[ CKEDITOR.CTRL + 72 /*H*/, 'replace' ],
[ CKEDITOR.ALT + 83 /*S*/, 'scaytcheck' ],
[ CKEDITOR.ALT + 66 /*B*/, 'showblocks' ],
[ CKEDITOR.ALT + CKEDITOR.SHIFT + 84 /*T*/, 'showborders' ],
[ CKEDITOR.ALT + 90 /*Z*/, 'source' ],
[ CKEDITOR.ALT + 48 /*ZERO*/, 'toolbarCollapse' ],
[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ],
];

The above code for the keystrokes ought to be added just after the code for the plugins. Then save the file. Now we need to add the plugins to CKEditor for the headings.

Download the plugins here. With Josh's help and this tutorial for adding shortcuts for headings you can now just add the plugins to the /include/thirdparty/ckeditor_34/plugins/ folder. After they are added the code we just added to the inlineck.js file will now work.

At present, gpEasy 2.2, the above code works fine in Firefox, Chrome, and Opera. It does NOT work in IE.

Here's a list of the shortcuts for easy reference.

CTRL + Q = blockquote
CTRL + B = bold
CTRL + 8 = bulletedlist
CTRL + CKEDITOR.SHIFT + 8 = bulletedListStyle
CTRL + M = indent
CTRL + CKEDITOR.SHIFT + M = outdent
CTRL + I = italic
CTRL + J = justifyblock
CTRL + E = justifycenter
CTRL + L = justifyleft
CTRL + R = justifyright
CTRL + 7 = numberedlist
CTRL + CKEDITOR.SHIFT + 7 = numberedListStyle
CTRL + Y = redo
CTRL + SPACE = removeFormat
CTRL + A = selectall
CTRL + CKEDITOR.SHIFT + X = strike
CTRL + 188  COMMA = subscript
CTRL + 190  PERIOD = superscript
CTRL + U = underline
CTRL + Z = undo
// Insert
ALT + A = anchor
ALT + D = creatediv
ALT + CKEDITOR.SHIFT + D = editdiv
ALT + F = flash
ALT + H = horizontalrule
CTRL + 9 = image
ALT + I = image
CTRL + K = link
ALT + L = link
CTRL + CKEDITOR.SHIFT + K = unlink
ALT + CKEDITOR.SHIFT + L = unlink
CTRL + ENTER = pagebreak
ALT + ENTER = pagebreak
ALT + V = pastetext
ALT + CKEDITOR.SHIFT + V = pastefromword
ALT + E = smiley
ALT + C = specialchar
ALT + T = table
ALT + O = templates
ALT + Backspace = blur
CTRL + W = Closes window/tab = changes NOT shaved
ALT + SHIFT + C = colordialog
ALT + M = contextMenu
ALT + F11 = elementsPathFocus
CTRL + CKEDITOR.SHIFT + F = find
ALT + X = maximize
CTRL + F2 = preview
CTRL + CKEDITOR.SHIFT + P = print
CTRL + H = replace
ALT + S = scaytcheck
ALT + B = showblocks
ALT + SHIFT + T = showborders
ALT + Z = source
ALT + ZERO = toolbarCollapse
ALT + F10 = toolbarFocus

The easiest way to get out of the editor when you need to go to another tab is to use ctrl+tab.

That's about it for this hack. Enjoy.

gpEasy B2sq Theme by CS @True Acupuncture