Как использовать пользовательские сочетания клавиш в CKeditor с jQuery? - PullRequest
Новая
       22

Как использовать пользовательские сочетания клавиш в CKeditor с jQuery?

7 голосов
/ 14 июля 2010

Я заменил текстовую область, которую мои пользователи используют для редактирования контента, на CKeditor.До этого изменения пользователи сохраняли там текст, нажимая Ctrl + S .Это делается с помощью плагина jQuery Hotkeys.

Поскольку CKeditor помещает свой текстовый редактор в iframe, ярлык не работает при редактировании текста.

Я надеюсь, что кто-то может помочь мне найти решение.1009 *

Ответы [ 2 ]

12 голосов
/ 09 февраля 2011

После утренней борьбы с этим, я наконец нашел способ сделать это!

CKeditor уже предлагает функциональность горячих клавиш (см. Документацию CKeditor ).Используя эту функциональность, мы можем связывать нажатия клавиш с действиями CKeditor.Для сохранения следует добавить следующую строку: 

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

Однако , при этом будет запущена команда сохранения CKeditor по умолчанию.В моем случае мне нужно выполнить функцию JS, которая отправляет данные CKeditor вместе с другими вещами через AJAX на сервер и оставляет пользователя в той же форме (не выходит).

После просмотра Форумы поддержки 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.

10 голосов
/ 18 сентября 2012

Можно добавить пользовательские команды в редактор и привязать эти команды к нажатию клавиши.Вот пример (с использованием адаптера 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';
        });

});
...