TinyMCE - Adding a Key Binding CNRTL-S COMMAND-S to call an AJAX save Function

I'd like to learn how to bind a CNRTL-S or COMMAND-S to call a function that I have on my page which AJAX saves the textarea content's

How can I bind those two commands? I used to use the following when it was just a textarea, but since adding TinyMCE it no longer works. Suggestions?

// Keybind the Control-Save
jQuery('#text_area_content').bind('keydown', 'ctrl+s',function (evt){
saveTextArea();
    return false;
});
 // Key开发者_JAVA技巧bind the Meta-Save Mac
jQuery('#text_area_content').bind('keydown', 'meta+s',function (evt){
saveTextArea();
    return false;
});

Thanks

To use a custom method for saving, i declare my saving function in the tinymce.init method

tinyMCE.init({
        // General options
        mode: "none",
        /* some standard init params, plugins, ui, custom styles, etc */            


        save_onsavecallback: saveActiveEditor,
        save_oncancelcallback: cancelActiveEditor
    });

Then i define the function itself

function saveActiveEditor() {
     var activeEditor = tinyMCE.activeEditor;
     var saveUrl = "http://my.ajax.path/saveStuff";
     var idEditor = activeEditor.id;
     var contentEditor = activeEditor.getContent();
     /* the next line is for a custom language listbox to edit different locales */
     var localeEditor = activeEditor.controlManager.get('lbLanguages').selectedValue;

     $.post(saveUrl ,
            { id: idEditor, content: contentEditor, locale: localeEditor },
            function(results) {
                if (results.Success) {
                    // switch back to display instead of edit
                    return false;
                }
                else {
                    activeEditor.windowManager.alert('Error saving data');
                    return false;
                }
            },
            'json'
        );
        return false;
 }

Don't forget to return false to override the default save action that posts back your data to the server.

edit to add: i only let the user change one tinymce instance at a time. You may want to change the locating the current instance to something else :)

edit #2: TinyMce already catches the Ctrl+s binding to process the data. Since it also cleans up html and is able to handle specific rules it's given when saving, the solution i propose is to plug your way of saving in tinyMce instead of fully overriding the Ctrl+s binding

The problem here is that the tinymce iframe does not delegate the events to the parent window. You can define custom_shortcuts in tinymce and/or use the following syntax:

// to delegate it to the parent window i use
var create_keydown_event = function(combo){
    var e = { type : 'keydown' }, m = combo.split(/\+/);
    for (var i=0, l=m.length; i<l; i++){
        switch(m[i]){
            case 'ctrl': e.metaKey = true;
            case 'alt': case 'shift': e[m[i] + 'Key'] = true; break;
            default : e.charCode = e.keyCode = e.which = m[i].toUpperCase().charCodeAt(0);
        }
    }
    return e;
}

var handler = function(){

  setTimeout(function(){
    var e = create_keydown_event(combo);
    window.parent.receiveShortCutEvent(e);
  }, 1);
}

//ed.addShortcut(combo, description, handler);
ed.addShortcut('ctrl+s', 'save_shortcut', handler);

in the parent window you need a function receiveShortCutEvent which will sort out what to do with it