如何使用自定义键盘快捷方式在CKeditor与jQuery？ [英] How to use custom keyboard shortcuts within CKeditor with jQuery?

问题描述

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

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.

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

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.

推荐答案

终于找到了办法！

CKeditor已经提供了一个热键功能（参见联系人文档）。使用这个功能，我们可以将按键绑定到CKeditor操作。为了保存，应添加以下行：

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' ],

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

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).

查看 CKeditor支持论坛后，在进行了一些编码后，我到达了下面的解决方案（我使用jQuery）：

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

在Firefox，Chrome和IE8中测试。

Tested in Firefox, Chrome and IE8.

这篇关于如何使用自定义键盘快捷方式在CKeditor与jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！