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