Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use custom keyboard shortcuts within CKeditor with jQuery?

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.

like image 912
JorisB Avatar asked Jul 14 '10 11:07

JorisB


2 Answers

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.

like image 200
pau.moreno Avatar answered Sep 17 '22 20:09

pau.moreno


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

});
like image 30
Jonathan Pasquier Avatar answered Sep 19 '22 20:09

Jonathan Pasquier