How to use custom keyboard shortcuts within CKeditor with jQuery?

8
votes

I have replaced the textarea my users use to edit content with CKeditor. Before this change, users were used to save there text by pressing Ctrl + S. This is done through the jQuery Hotkeys Plugin.

Since CKeditor puts its text editor within an iframe the shortcut does not work when editing text.

I hope someone can help me find a solution.

2
jquerykeyboard-shortcutsckeditor

2 Answers

13
votes

After a morning struggling with it, I finally found the way to do that!

CKeditor already offers a hotkey functionality (see the CKeditor documentation). Using this functionality we can bind keystrokes to CKeditor actions. In order to save, the following line should be added:

[ CKEDITOR.CTRL + 83 /*S*/, 'save' ],

However, this will fire the default CKeditor save command. In my case I need to execute a JS function that sends the CKeditor data along with other stuff via AJAX to the server and leaves the user in the same form (doesn't exit).

After looking at the CKeditor support forums and after some coding, I arrived to the following solution (I use jQuery):

var isCtrl = false;

$('#your_textarea_id').ckeditor(function ()
{

    editor.on( 'contentDom', function( evt )
    {
        editor.document.on( 'keyup', function(event)
        {
            if(event.data.$.keyCode == 17) isCtrl=false;
        });

        editor.document.on( 'keydown', function(event)
        {
            if(event.data.$.keyCode == 17) isCtrl=true;
            if(event.data.$.keyCode == 83 && isCtrl == true)
            {
                //The preventDefault() call prevents the browser's save popup to appear.
                //The try statement fixes a weird IE error.
                try {
                    event.data.$.preventDefault();
                } catch(err) {}

                //Call to your save function

                return false;
            }
        });

    }, editor.element.$);
});

Tested in Firefox, Chrome and IE8.

11
votes

It is possible to add custom commands to the editor and bind these commands to keystroke. Here is an example (using jQuery adapter)

$(function() {
    // Create editor
    $('#textbox').ckeditor(function() {
            // Once the editor is loaded, we can add custom commands

            /** Alt + A will alert a greeting message **/
            // First, we define our custom command
            this.addCommand('myGreetingCommand', {
                exec : function(editor, data) {
                    alert("Hello world!");
                }
            });

            // Then, we set up the key combination
            this.keystrokeHandler.keystrokes[CKEDITOR.ALT + 65 /* A */] = 'myGreetingCommand';

            /** Ctrl + B will alert a good bye message **/
            this.addCommand('myGoodByeCommand', {
                exec : function(editor, data) {
                    alert("Goodbye!");
                }
            });

            this.keystrokeHandler.keystrokes[CKEDITOR.CTRL + 66 /* B */] = 'myGoodByeCommand';
        });

});