Make TinyMCE+JEditable submit after pressing ctrl+s

Question

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'
   });
});

Answer 1

Take a look at these jquery plugins for creating keyboard shortcuts. It might be what your looking for.

hotkeys

js-hotkeys

Answer 2

This is a somewhat special thing to achieve. The problem here is that tinymce (and every mighty rte) 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. I will show you what i do to solve this issue

In your tinymce init (or one of your plugins) you need to set the following

// 83 instead of 73 as keyCode here !!!!!!!!
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) {
    setTimeout(function(){
      var e = { type : 'keydown'};
      e.charCode = e.keyCode = e.which = 83;
      e.shiftKey = e.altKey = e.metaKey = false;
      e.ctrlKey = true;
      window.parent.receiveShortCutEvent(e); // !!! delegate created event object
    }, 1);
  }
 });
},

in the html-document (or an included js-file) you need to set this

// init in the main document
// Keydown events on the main document will call receiveShortCutEvent
$(document).bind('keydown', function(e)
{
    var handled = receiveShortCutEvent(e); 
    return !handled;
});

you will need to define what to do for which shortcut here too

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 : 
          alert("you pressed ctrl-s!");
          break;

      default : handled = false;
  }
}

Answer 3

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();
       }
     });
   }

  });