如何在jqgrid编辑表单中捕获tinyMCE中的Ctrl + S键

时间:2012-04-06 20:15:10

标签: javascript jqgrid tinymce

Ctrl + S和Ctrl + Q键在jqgrid编辑中添加并使用Oleg添加表单很棒的答案:

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编辑器使用

在afterShowForm事件中以jqgrid形式附加到textarea元素
    $('.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"
    });
}

之后在textarea中按Ctrl + S会出现IE9标准保存对话框。如何允许Ctrl + S在tinyMCE中保存jqgrid表单呢?

更新

我尝试使用以下代码回答推荐。 Keydown事件没有被捕获。

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

那是未定的。代码

$('.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;
            }
        });
    },

捕获ctrl + s和ctrl + q。 使用下面的代码在html keydown事件中定义了许多全局快捷键。 如果tinymce有焦点,那些被忽略。如何使他们也工作。如何调用html.keydown 主窗口或其他想法?

$(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

1 个答案:

答案 0 :(得分:2)

我自己不使用tinyMCE,但对the demo的简短检查表明tinyMCE使用<iframe>。如果您还需要在keydown内捕获<iframe>事件,则应设置其他keydown事件处理程序。对于有

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

将使用<iframe>的ID content_ifr。因此,您可以尝试按照方式构建<iframe> ID,或者只是尝试在iframe兄弟<span>中查找和<textarea>。然后,您可以从.contentWindow.document元素获取<iframe>,并在keydown上设置.contentWindow.document事件处理程序。有关详细信息,请参阅the answerthis one。可能还有其他一些更为面向MINCE的解决方案,如here会更好。因为我自己不使用tinyMCE(请参阅我的答案的第一句),我不能推荐你一些具体的方法。

更新:现在我觉得有更多直接的方法可以提供tinyMCE:onKeyDown