how to catch Ctrl+S key in tinyMCE in jqgrid edit form

Question

Ctrl+S and Ctrl+Q keys are cathed in jqgrid edit and add forms using Oleg great answer:

beforeShowForm: function ($form) {
  var gridIdEncoded = $.jgrid.jqID($form[0].id.substring(8));
  $("#editmod" + gridIdEncoded).bind('keydown.formEvent', function (e) {
    if (e.ctrlKey && e.which === 83) {
      $("#TblGrid_" + gridIdEncoded + "_2 #sData").trigger("click");
      return false;
      }
    if (e.ctrlKey && e.which === 81) {  // ctrl-q
                   $("#TblGrid_" + gridIdEncoded + "_2 #cData").trigger("click");
                   return false;
                   }
}

TinyMCE html editor is attached to textarea elements in jqgrid form in afterShowForm event using

    $('.htmleditor', formSelector).attr('cols', '50').attr('rows', '15').tinymce({
        theme: "advanced",
        language: "et",
        theme_advanced_buttons2: "",
        theme_advanced_buttons3: "",
        theme_advanced_buttons1: "bold,italic,underline,strikethrough,separator,justifyleft,justifycenter," +
"justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,cut ,copy,paste,undo,redo" +
"link,unlink,image,cleanup,code,hr,|,removeformat,formatselect,|,fontselect,fontsizeselect," +
"sub,sup,|,forecolor,backcolor,forecolorpicker,backcolorpicker,charmap,visualaid," +
"anchor,blockquote"
    });
}

After that pressing Ctrl+S in textarea causes IE9 standard save dialog to appear. How to allow Ctrl+S to save jqgrid form in tinyMCE also ?

Update

I tried recommendation from answer using code below. Keydown event is not catched.

afterShowForm: function (formSelector) {
        $('.htmleditor', formSelector).attr('cols', '50').attr('rows', '15').tinymce({
            setup: function (ed) {
                ed.onKeyDown.add(function (ed, e) {
                    // this box happens: alert('setup binding');
                    var gridIdEncoded = $.jgrid.jqID(formSelector[0].id.substring(8));
                    $("#editmod" + gridIdEncoded).bind('keydown.formEvent', function (e) {
                        alert('in keydown'); // this does not happen
                        if (e.ctrlKey && e.which === 83) {
                            $("#TblGrid_" + gridIdEncoded + "_2 #sData").trigger("click");
                            return false;
                        }
                        if (e.ctrlKey && e.which === 81) {  // ctrl-q
                            $("#TblGrid_" + gridIdEncoded + "_2 #cData").trigger("click");
                            return false;
                        }
                    });
                });
            },

            theme: "advanced",
            language: "et",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            theme_advanced_buttons1: "bold,italic,underline,strikethrough,separator,justifyleft,justifycenter," +
    "justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,cut ,copy,paste,undo,redo" +
    "link,unlink,image,cleanup,code,hr,|,removeformat,formatselect,|,fontselect,fontsizeselect," +
    "sub,sup,|,forecolor,backcolor,forecolorpicker,backcolorpicker,charmap,visualaid," +
    "anchor,blockquote"
        });
    };

Update2

e.which was undefinded. Code

$('.htmleditor', formSelector).attr('cols', '50').attr('rows', '15').tinymce({
    setup: function (ed) {
        ed.onKeyDown.add(function (ed, e) {
            var gridIdEncoded = $.jgrid.jqID(formSelector[0].id.substring(8));
            if (e.ctrlKey && e.keyCode === 83) {
                $("#TblGrid_" + gridIdEncoded + "_2 #sData").trigger("click");
                return false;
            }
            if (e.ctrlKey && e.keyCode === 81) {
                $("#TblGrid_" + gridIdEncoded + "_2 #cData").trigger("click");
                return false;
            }
        });
    },

catches ctrl+s and ctrl+q. There are also lot of global shortcut keys defined in html keydown event using code below. Those are ignored if tinymce has focus. How to make them to work also. How to call html.keydown in main window or other idea ?

$(function () {
    $("html").keydown(function (evt) {
        var elem = evt.target || evt.srcElement;
        if (evt.ctrlKey) {
            switch (evt.keyCode) {
                case 68: openWindow('ToodeL'); return false;
                case 69: openWindow('DoklstlG'); return false;
... lot of openWindow calls

score 2 · Accepted Answer · edited May 23 '17 at 11:56

2

I don't use tinyMCE myself, but short examine of the demo shows that tinyMCE uses <iframe>. If you need to catch keydown event inside of the <iframe> too you should set additional keydown event handler. For the demo having

<textarea name="content" style="width:100%"></textarea>

the id of the <iframe> will be used content_ifr. So you can try to find the <iframe> by id constructed in the way or just try to find and child iframe in the <span> sibling to the <textarea>. Then you can get .contentWindow.document from the <iframe> element and set keydown event handler on the .contentWindow.document. See the answer and this one for more information. Probably some other more tinyMCE oriented solution like here would be better. Because I don't use tinyMCE myself (see the first sentence of my answer), I can't recommend you some specific way.

UPDATED: It seems to me now that there are more direct way which provide tinyMCE: onKeyDown.

edited May 23 '17 at 11:56

Community

1
1

answered Apr 06 '12 at 21:14

Oleg

220,925
34
403
798

Thank you for great answer. I tried onKeyDown but this event does not fire. I updated question. Maybe jquery selector if iframe cannot find elements outside iframe. – Andrus Apr 06 '12 at 21:47
2

@Andrus: I don't understand why you call `.bind('keydown...` inside of `ed.onKeyDown.add`? I supposed that `ed.onKeyDown.add(function (ed, e) {` already do the binding which you need and you need just test `e.ctrlKey && e.which === 83` directly here. Will be `alert('setup binding')` of some `console.log` in the handler called if you would press Ctrl+S in the tinyMCE? – Oleg Apr 06 '12 at 21:55
thank you, tt worked. e.which was undefined, maybe jquery is not loaded in iframe. However global shortcuts are still not working? I updated question. – Andrus Apr 07 '12 at 07:54
1

@Andrus: One can interpret `` as new window which has *separate* `` root element. So you should place the code `if (evt.ctrlKey) { switch (evt.keyCode) {case 68: openWindow('ToodeL'); return false; ...` in separate function and call the function in both event handlers: inside of `$("html").keydown` and inside of `ed.onKeyDown.add`. – Oleg Apr 07 '12 at 08:24

how to catch Ctrl+S key in tinyMCE in jqgrid edit form

1 Answers1

Linked