Привет, у меня есть ckeditor и одна кнопка для сохранения текста ckeditor с ajax.
<textarea id="editor1" name="editor1"></textarea> <input type="button" name="send" id="send" value="Send" onclick="save()"> я хочу удалить кнопку, а при нажатии клавиши введите сохранить текст с помощью ajax (запустить функцию сохранения), но когда нажмите enter в строке ckeditor break. и как использовать кнопку ввода обмена?
<textarea id="editor1" name="editor1"></textarea> if (enter press in any where web page ) do save();
Важная часть заключается в том, что содержимое в CKEditor является iframe, поэтому те решения, которые пытаются проверять нажатия клавиш на текущем документе, терпят неудачу.
Решение так же просто, как это, используя события CKEditor и не полагаясь на какую-либо внешнюю библиотеку:
var editor = CKEDITOR.replace('editor1'); editor.on('key', function(ev) { if (ev.data.keyCode==13) { ev.cancel(); console.log('enter'); } });
Вы можете протестировать его здесь: http://jsfiddle.net/zjkSR/ (посмотрите на свою консоль)
Это код, который я создал для сайта некоторое время назад, он позволяет вам отправлять на ввод, однако позволит вам удерживать shift + enter, чтобы создать новую строку (в качестве текстовых областей, которые должны автоматически отправляться).
Он написан с использованием jQuery.
var TextBox = $('.autosubmit'); var code =null; // on keypress do this TextBox.keyup(function(e) { // get keycode code= (e.keyCode ? e.keyCode : e.which); // if keycode is 13 (enter) if (code == 13 && e.shiftKey) { var content = this.value; var caret = getCaret(this); this.value = content.substring(0,caret)+"\n"+content.substring(carent,content.length-1); event.stopPropagation(); } else if (code == 13) { $(this).closest("form").submit(); } }); function getCaret(el) { if (el.selectionStart) { return el.selectionStart; } else if (document.selection) { el.focus(); var r = document.selection.createRange(); if (r == null) { return 0; } var re = el.createTextRange(), rc = re.duplicate(); re.moveToBookmark(r.getBookmark()); rc.setEndPoint('EndToStart', re); return rc.text.length; } return 0; }
Однако я не уверен, что он будет работать внутри CK Editor. Лучший способ сделать это – добавить что-то подобное в ваш файл конфигурации:
config.keystrokes = [ [ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], [ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], [ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], [ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], [ CKEDITOR.CTRL + 76 /*L*/, 'link' ], [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], [ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ], [ 13, 'save'] // note this line ];
который добавит событие save при вводе, но сохранит другие нажатия клавиш по умолчанию.
Что вам нужно сделать, это захватить событие keyup или keydown с помощью jQuery и проверить keyCode event чтобы увидеть, был ли он нажатием клавиши ввода.
Например:
$('body').on('keyup', function(event){ if (event.keyCode===13) { alert('enter key pressed!'); save(); } });
Ссылка на ключевой код Javascript: http://asquare.net/javascript/tests/KeyCode.html
Изменить: oops, misread question – см. Обновленный ответ. Изменен селектор для целевого тела вместо текстового поля, но, как сказал @KevinB, вероятно, плохая идея.
$(document).ready(function () { //set up the editor instance for ckeditor var editor = CKEDITOR.replace( 'editor1', { toolbar: [ ['Source'], ['Cut', 'Copy', 'PasteText'], ['Undo', 'Redo', '-', 'SelectAll', 'RemoveFormat'], ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'], ['SpecialChar'] ] } ); $('body').on('keypress', function (e) { if (e.target.id !== "editor1" && (e.keyCode ? e.keyCode : e.which) === 13) { alert(e.target.id); // jquery ajax save function } }); }); <textarea id="editor1" rows="5" cols="50"></textarea>