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

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

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

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

Answer 1

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

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

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

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

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