如何在CKeditor中使用jQuery的自定义键盘快捷键？

Question

我已经替换了用户用来编辑CKeditor内容的textarea.在此更改之前,用户通过按Ctrl+ 来保存文本S.这是通过jQuery Hotkeys插件完成的.

由于CKeditor将其文本编辑器放在iframe中,因此在编辑文本时快捷方式不起作用.

我希望有人可以帮我找到解决方案.

Answer 1

经过一个早晨的挣扎,我终于找到了做到这一点的方法!

CKeditor已经提供了热键功能(参见CKeditor文档).使用此功能,我们可以将键击绑定到CKeditor操作.为了保存,应添加以下行:

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

但是,这将触发默认的CKeditor save命令.在我的情况下,我需要执行一个JS函数,通过AJAX将CKeditor数据和其他东西一起发送到服务器,并以相同的形式离开用户(不退出).

在查看CKeditor支持论坛并经过一些编码后,我到达了以下解决方案(我使用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.$);
});

在Firefox,Chrome和IE8中测试过.

Answer 2

可以将自定义命令添加到编辑器并将这些命令绑定到击键.这是一个例子(使用jQuery适配器)

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

});