Make TinyMCE+JEditable submit after pressing ctrl+s

Updated: May 13th, 2011

Please find solution in my Answer below.

---

Updated: May 5th, 2011

So the problem now I'm having is that I want to invoke the JEdtiable submit button after pressing Ctrl+S. The great Thariama has shown the Ctrl+S part for TinyMCE, so now I have to figure out how I get JEditable to submit.

After pressing Ctrl+S I tried to find the submit button and click it as per invoke cancel on jeditable. Doesn't work.

Here's my relevant code for the JEditable Initialization:

    //Edit Note
$(function(){
   $(".edit").editable('ajax/save.php?editnotetext', {
      type : 'mce',
      submit : '<button class="save_button">Save</button>',
      cancel: 'Cancel',
      event: 'dblclick',
      indicator : 'Saving...',
      tooltip : 'Doubleclick to edit...',
      onblur: 'ignore',
      width : '700px',
      height : '100px'
   });
});

And Here's my code for trying to submit it

var receiveShortCutEvent = function(e) {
  if (e.ctrlKey){
        //console.log('e.keyCode:',e.keyCode);
        var handled = true; // default case set this to false which lets the browser execute a browsershortcut if existent
        switch (e.keyCode){   // be careful that keyCode may differ in browsers sometimes 
          case 83 : 
              $('.edit').find('.save_button').click();
              break;

          default : handled = false;
        }
    }
};

Any thoughts would be most welcome!

---

April 28th, 2011

Using TinyMCE with JEditable (as per http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin). After editing my content, I'd like to submit it by pressing Ctrl+S. Unfortunately, nothing gets submitted and I'm left with my original content. It does work if I press the submit button.

I've tried:

$(function(){
    $(".edit").keypress(function(event) {
        if ((event.which == 115 && event.ctrlKey)){
            alert("you pressed ctrl-s!");
            $(this).submit();
        }
    });


   $(".edit").editable('ajax/save.php?editnotetext', {
      type : 'mce',
      submit : 'save',
      cancel: 'cancel',
      indicator : 'Saving...',
      tooltip : 'Click to edit...',
      onblur: 'ignore',
      width : '500px',
      height : '100px'
   });
});

SOLUTION 1: NOT USING TINYMCE

If you're not using TinyMCE with JEditable, then look at Arman P.'s post at Invoke the JEdtiable Submit Button By Modifying Plugin.

SOLUTION 2: USING TINYMCE

As Thariama points out, Tinymce uses an iframe for editing the content. This leads to the problem that the iframe will 'catch' all keyboard events when the iframe has focus. As such, you need to modfy the tinymce customization.

First is in the JEditable initialization, you but give the save button a class, which we will call "save_button":

    $(".edit").editable('ajax/save.php?editnotetext', {
        type : 'mce',
        submit : '<button class="save_button">Save</button>',
        ...
    });

In the TinyMCE initialization, you must create a setup that catches Ctrl+S and submits the buttons of save_button class:

   tinyMCE.init({
    ...
    setup : function(ed) {
     ed.onKeyDown.add(function(ed, evt) {
        // catch crtl+s, use receiveShortCutEvent in the html-document
        if (evt.keyCode == 83 && evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
           evt.preventDefault();
           $('.save_button').submit();
       }
     });
   }

  });