admin管理员组文章数量:1325385
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
});
Share
Improve this question
edited May 26, 2020 at 12:05
asked May 26, 2020 at 9:19
user160406user160406
1 Answer
Reset to default 0As 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
版权声明:本文标题:javascript - Can't Listen to KeyDown in TInyMCE Iframe (jQuery) and Pass it to Parent HTML FORM 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742137866a2422449.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论