Invoke the JEdtiable Submit Button By Modifying Plugin

Question

SOLUTION 1: NOT USING TINYMCE

If you're not using TinyMCE with JEditable, then look at Arman P.'s post below.

SOLUTION 2: USING TINYMCE

If you're using TinyMCE, then Arman P.s method unfortunately doesn't work. 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();
       }
     });
   }

  });

---

I want to invoke submit when user presses Ctrl+S (using TinyMCE so that's the most logical for user). I had a post Make TinyMCE+JEditable submit after pressing ctrl+s that tried to address this, but the problem I think is with JEditable and not TinyMCE.

I think the best approach is to slightly modify the plugin so that the form submits when I press Ctrl+S.

Unfortunately what I've tried so far doesn't work. The alert below doesn't even get called. I think the problem has to do with the tinyMCE customization because the built-in option in JEditable where one can reset with Esc doesn't work.

CODE (jquery.tinymcehelper.js)

    $.fn.tinymce = function(options){
       return this.each(function(){
          tinyMCE.execCommand("mceAddControl", true, this.id);
       });
    }

    function initMCE(){
       tinyMCE.init({
            mode : "none",
            theme : "advanced",
            plugins: "save, table, tinyautosave, imagemanager, spellchecker, autoresize",
            theme_advanced_buttons1_add_before : "tinyautosave, code, separator, delete_table",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,search,replace,|,bullist,numlist,|,outdent,indent,blockquote",
            theme_advanced_buttons2 : "undo,redo,link,unlink,code,|,forecolor,backcolor,|,insertimage,spellchecker",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            content_css : "css/tinymce.nebula.css",
            width : "700"
            ,
            setup : function(ed) {
             ed.onKeyPress.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 : 'keypress'};
                    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);
               }
               });
           }

          });
    }

    initMCE();

    $.editable.addInputType('mce', {
       element : function(settings, original) {
          var textarea = $('<textarea id="'+$(original).attr("id")+'_mce"/>');
          if (settings.rows) {
             textarea.attr('rows', settings.rows);
          } else {
             textarea.height(settings.height);
          }
          if (settings.cols) {
             textarea.attr('cols', settings.cols);
          } else {
             textarea.width(settings.width);
          }
          $(this).append(textarea);
             return(textarea);
          },
       plugin : function(settings, original) {
          tinyMCE.execCommand("mceAddControl", true, $(original).attr("id")+'_mce');
          },
       submit : function(settings, original) {
    // BELOW IS MY BEST ATTEMPT. I THINK I HAVE TO HAVE SOMETHING HERE.I'VE COMMENTED OUT MY MODIFICATION
   //      input.keypress(function(e) {
   //         if ((e.ctrlKey) && (e.keyCode == 83)) {          
   //              alert("Ctrl+S pressed");
   //              e.preventDefault();
   //              tinyMCE.triggerSave();
   //              tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');    
    //         }
  //        }
 //         else {
          tinyMCE.triggerSave();
          tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
    //      }
          },
       reset : function(settings, original) {
          tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
          original.reset();
       }
    });

Answer 1

Hey @Hydra. I'll give you a clue. Below you can find the code snippet for Ctrl+S capture on window. Rewrite to your context simply. The main thing to note is that you must first explicitly prevent default behavior on event.

Edited
And be sure to catch keydown event not keypress. keypress is not cross-browser solution.

$(window).keydown(function(event) {
  if ((event.keyCode == 83 && event.ctrlKey)){
      alert("Ctrl+S pressed");
      event.preventDefault();
  }
});

For jEditable find in sourcecode of the plugin following code:

input.keydown(function(e) {
  if (e.keyCode == 27) {
    e.preventDefault();
    //self.reset();
    reset.apply(form, [settings, self]);
  }
});

and add another if statement in that function

if (e.keyCode == 83 && e.ctrlKey) {
  e.preventDefault();
  form.submit();
  //alert("Ctrl+S Pressed!");  // Alert only here, after 2 previous lines
}

Tested! - Working.

In your case you're using tinyMce and if in that case jEditable is not creating input then it's creating maybe textarea, you can try to capture that event on textarea. If you provide me with working example of jEditable with tinyMce (any link), I'll be able to help you further.