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

admin管理员组

文章数量:1325702

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

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

• javascript
• jquery
• forms
• html
• iframe

Share Improve this question edited May 26, 2020 at 12:05 asked May 26, 2020 at 9:19 user160406user160406

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： javascriptCan39t Listen to KeyDown in TInyMCE Iframe (jQuery) and Pass it to Parent HTML FORM