<...">
Geek asks and answers

Enter key to save textarea values

Hi, I have ckeditor and one button to save ckeditor text with ajax.

<textarea id="editor1" name="editor1"></textarea>
<input type="button" name="send" id="send" value="Send" onclick="save()">

I want to remove the button, and when the key press enter, save the text with ajax (run the save function) but when press enter in the line ckeditor break. and how to use the exchange input button?

<textarea id="editor1" name="editor1"></textarea>
if (enter press in any where web page ) do save();
+3
source share
4 answers

The important part is that the content in CKEditor is an iframe, so those decisions that try to check keystrokes on the current document will not be executed.

The solution is as simple as this, using CKEditor events and not relying on any external library:

var editor = CKEDITOR.replace('editor1');  

editor.on('key', function(ev) {
   if (ev.data.keyCode==13)
   {
       ev.cancel();
       console.log('enter');
   }       
});

: http://jsfiddle.net/zjkSR/ ( )

+7

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

+1

, keyup keydown jQuery keyCode event, , .

:

$('body').on('keyup', function(event){
    if (event.keyCode===13)
    {
        alert('enter key pressed!');
        save();
    }
});

Link to Javascript key code: http://asquare.net/javascript/tests/KeyCode.html

Edit: oops, misread question - view the updated answer. Changed selector for target body instead of text box, but as @KevinB said, probably a bad idea.

0
source 
$(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>
0
source

More articles:


All Articles