CODEWITHSUNDEEP
phpjqueryckeditor
behzad n
behzad n

Reputation: 249

enter key for save textarea values

hi i have ckeditor and one button for save ckeditor text whith ajax . 

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

i want remove button and when key press enter save text whith ajax ( run save function ) but when press enter in ckeditor line break . and how use enter exchange button?

<textarea id="editor1" name="editor1"></textarea>
if (enter press in any where web page ) do save();

Upvotes: 3

Views: 4245

Answers (4)

Thulasiram
Thulasiram

Reputation: 8552

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

Upvotes: 0

AlfonsoML
AlfonsoML

Reputation: 12690

The important part is that the content in CKEditor is an iframe, so those solutions that try to check key presses on the current document will fail.

The solution is as simple as this using the CKEditor events and without 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');
   }       
});

You can test it here: http://jsfiddle.net/zjkSR/ (look at your console)

Upvotes: 7

Nick
Nick

Reputation: 6346

This is code I created for a site a while back, it allows you to submit on enter, however will allow you to hold shift+enter to create a new line (as text areas that auto submit should).

It's written using 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;
     }

However, I'm not certain it will work inside CK Editor. The best way to do this would be to add something like this to your config file:

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
];

which will add the save event on enter, but will keep the other default keystrokes.

Upvotes: 1

totallyNotLizards
totallyNotLizards

Reputation: 8569

What you need to do is capture the keyup or keydown event with jQuery, and check the keyCode of the event to see if it was the enter key that was pressed.

Eg:

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

Javascript keyCode reference: http://asquare.net/javascript/tests/KeyCode.html

Edit: oops, misread question - see updated answer. Changed selector to target body instead of the textarea, but as @KevinB said, probably a bad idea.

Upvotes: 0

Related Questions