Anyone successfully added CKEditor shortcut keys?

[Robin S]

CKEditor doesn't provide shortcut keys for applying headings 1-6 and this makes text formatting slower than it needs to be. I'd like to add shortcuts for headings but I'm not sure where the config code should go.

The CKEditor docs for shortcut keys give the following example:

Edit: wrong version, see next post

// This is actually the default value.
config.keystrokes =
[
    [ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ],
    [ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ],

    [ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ],

    [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ],
    [ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ],
    [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ],

    [ CKEDITOR.CTRL + 76 /*L*/, 'link' ],

    [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ],
    [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ],
    [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ],

    [ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]
];

And the advice is that the code belongs in "plugins/keystrokes/plugin.js", but I suspect that isn't correct for PW because this file doesn't exist in the CKEditor module yet the normal keyboard shortcuts are available in PW. Which makes me think the keyboard shortcuts are defined somewhere else.

The other place I thought of adding the config code is in the Custom Config Options textarea in the field settings, but the example code looks like it doesn't conform to property: value format for this field.

[Robin S]

The code above is from the docs for CKEditor v3, so that's not applicable.

The v4 docs give the following example...

editor.setKeystroke( CKEDITOR.CTRL + 115, 'save' ); // Assigned Ctrl+S to the "save" command.
editor.setKeystroke( CKEDITOR.CTRL + 115, false );  // Disabled Ctrl+S keystroke assignment.
editor.setKeystroke( [
    [ CKEDITOR.ALT + 122, false ],
    [ CKEDITOR.CTRL + 121, 'link' ],
    [ CKEDITOR.SHIFT + 120, 'bold' ]
] );

...but I'm still not sure where this should be added to be applied in PW's CKEditor module.

[kixe]

You have to create a plugin, place it in /site/modules/InputfieldCKEditor/plugins/
and enable it in the fieldsettings under Setup > Plugins

Take this one as a starting point:
Save the following code as /site/modules/InputfieldCKEditor/plugins/keystrokes/plugins.js

// Assigne Ctrl+I to "bold" INSTEAD OF 'italic'(default).
( function() {    
    CKEDITOR.plugins.add( 'keystrokes', {
        init: function( editor ) {
            editor.setKeystroke( CKEDITOR.CTRL + 73 , 'bold' );
        }
    });
} )();

Edited March 18, 2016 by kixe

[Robin S]

Thanks! That plugin code works perfectly for all the basic commands.

Unfortunately I'm having trouble finding the names of commands for items in the Format dropdown (headings 1-6, paragraph, etc). That's really a CKEditor problem rather than a PW problem. Will post the solution here if I can find one.

[Robin S]

Got it sorted, and complete plugin code is:

// Keyboard shortcuts for headings 1-6, p
( function() {
    CKEDITOR.plugins.add( 'keystrokes', {
        init: function( editor ) {
            editor.addCommand( 'h1', {
                exec: function( editor ) {
                    var format = { element: 'h1' };
                    var style = new CKEDITOR.style(format);
                    style.apply(editor.document);
                }
            } );
            editor.addCommand( 'h2', {
                exec: function( editor ) {
                    var format = { element: 'h2' };
                    var style = new CKEDITOR.style(format);
                    style.apply(editor.document);
                }
            } );
            editor.addCommand( 'h3', {
                exec: function( editor ) {
                    var format = { element: 'h3' };
                    var style = new CKEDITOR.style(format);
                    style.apply(editor.document);
                }
            } );
            editor.addCommand( 'h4', {
                exec: function( editor ) {
                    var format = { element: 'h4' };
                    var style = new CKEDITOR.style(format);
                    style.apply(editor.document);
                }
            } );
            editor.addCommand( 'h5', {
                exec: function( editor ) {
                    var format = { element: 'h5' };
                    var style = new CKEDITOR.style(format);
                    style.apply(editor.document);
                }
            } );
            editor.addCommand( 'h6', {
                exec: function( editor ) {
                    var format = { element: 'h6' };
                    var style = new CKEDITOR.style(format);
                    style.apply(editor.document);
                }
            } );
            editor.addCommand( 'p', {
                exec: function( editor ) {
                    var format = { element: 'p' };
                    var style = new CKEDITOR.style(format);
                    style.apply(editor.document);
                }
            } );
            editor.setKeystroke( CKEDITOR.ALT + 49 , 'h1' ); // ALT + 1
            editor.setKeystroke( CKEDITOR.ALT + 50 , 'h2' ); // ALT + 2
            editor.setKeystroke( CKEDITOR.ALT + 51 , 'h3' ); // ALT + 3
            editor.setKeystroke( CKEDITOR.ALT + 52 , 'h4' ); // ALT + 4
            editor.setKeystroke( CKEDITOR.ALT + 53 , 'h5' ); // ALT + 5
            editor.setKeystroke( CKEDITOR.ALT + 54 , 'h6' ); // ALT + 6
            editor.setKeystroke( CKEDITOR.ALT + 55 , 'p' ); // ALT + 7
        }
    });
} )();

After adding the plugin it needs to be activated in the field settings > Input > Extra Plugins

keystrokes.zip

[szabesz]

Thank you for sharing, Robin S!

[stufru]

@Robin S Thank you for posting your solution!

I'm currently trying to make a similar set of keyboard shortcuts for basic headings. 

Is your file still available to download? (When I click it, the link says "The page you are trying to access is not available for your account.")

 

[Robin S]

3 hours ago, stufru said:

Is your file still available to download? (When I click it, the link says "The page you are trying to access is not available for your account.")

Hi @stufru, welcome to the forums. The file is still downloadable, but maybe there is some forum restriction that prevents users with no posts from downloading (?). Now that you have made a post perhaps it works?

If not the entire plugin code is in the post above - just copy it into a file named "plugin.js" and put that inside a folder named "keystrokes". Then copy that folder to /site/modules/InputfieldCKEditor/plugins and activate the plugin from your CKEditor field settings under "Extra Plugins".

[szabesz]

8 hours ago, Robin S said:

but maybe there is some forum restriction that prevents users with no posts from downloading (?)

I guess so. 10 post are required to be a "fully qualified forum member", as far as I can remember. BTW, I can also download the zip file.

[tpr]

AdminOnSteroids also uses the same code for ckeditor hotkeys, with a few extra shortcuts like ordered/unordered lists.