Can't Listen to KeyDown in TInyMCE Iframe (jQuery) and Pass it to Parent HTML FORM

Question

I am trying to build an HTML form with TinyMCE textarea such that on Clicking Ctrl+S, it submits the form, by clicking the SUBMIT buton of form.

I am using jQuery, here is the KeyDown

jQuery(document).ready(function(){
jQuery(document).keydown(function(e) {
  if((e.ctrlKey || e.metaKey) && e.which == 83) {
      e.preventDefault();
    jQuery('.action-save').click();
  }

// Submit Form when CTRL+S is clicked
});
});

And below is the relevant portion of HTML form.

...html
<form id="#form">
...

<!--TinyMCE iFrame-->
<iframe id="frontier_post_content_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press Alt-Shift-H for help." style="width: 100%; height: 400px; display: block;"></iframe>

<button class="button action-save" type="submit" name="user_post_submit" style=" position: fixed; bottom: 0; left: 96px; margin-bottom: 0; padding: 8px 20px; font-size: 14px; height:38px; color:#fff;" id="user_post_save" value="save">Save</button>
</form>

As you can see it is a FORM, with TinyMCE, the form obviously is far more compicated, and there are things I did not include, because I tried to include regular stuf..

The above code works perfectly, for whole of the form, anywhere I do shortcut, it submits. But not in TinyMCE iframe.

If I click CTRL+S inside Iframe, it doesnt work.

How to Make the Keyboard Shortcut work in iFrame

I tried below code, to make it work specifically in iFrame too, but didnt work

jQuery('#frontier_post_content_ifr').load(function(){
        jQuery(this).contents().on('keydown', function(event) {
  if((e.ctrlKey || e.metaKey) && e.which == 83) {
      e.preventDefault();
    jQuery('.action-save').click();
  }

// Submit Form when CTRL+S is clicked
});

Answer 1

As it turns out, it's not that difficult, we need to add a JS function inside the TinyMCE init, to make it possible. My approach used Wordpress's TinyMCE before init function, to add JS to the TinyMCE, Iframe.

Below is the code, this code should go into your Child Theme's functions.php or in a custom plugin.

add_filter( 'tiny_mce_before_init', 'wpse24113_tiny_mce_before_init' );
function wpse24113_tiny_mce_before_init( $initArray )
{
    $initArray['setup'] = <<<JS
[function (editor) {
        editor.on('keyDown', function (e) {

  if((e.ctrlKey || e.metaKey) && e.which == 83) {
      e.preventDefault();
    jQuery('.action-save').click();
  }
        });
    }][0]
JS;
    return $initArray;
}

This code adds js to iframe. It listens for the keydown function, and then clicks the Save Button, as intended, and shall work perfectly fine.