Question

我已将用户用来编辑内容的textarea替换为CKeditor。在此更改之前，用户通过按 Ctrl + S 来保存文本。这是通过jQuery Hotkeys Plugin完成的。

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

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

Answer 1

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

CKeditor已经提供了热键功能（参见CKeditor documentation）。使用此功能，我们可以将键击绑定到CKeditor操作。要保存，应添加以下行：

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

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

在查看CKeditor support forums之后，经过一些编码，我得到了以下解决方案（我使用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';
        });

});

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

2 个答案: