Question

解决方案1：不使用TINYMCE

如果您没有使用带有JEditable的TinyMCE，请查看下面的Arman P.的帖子。

解决方案2：使用TINYMCE

如果你正在使用TinyMCE，那么遗憾的是Arman P.s方法不起作用。 Tinymce使用iframe编辑内容。这会导致iframe在iframe具有焦点时“捕获”所有键盘事件的问题。因此，您需要修改tinymce定制。

首先是在JEditable初始化中，你给了保存按钮一个类，我们称之为“save_button”：

    $(".edit").editable('ajax/save.php?editnotetext', {
        type : 'mce',
        submit : '<button class="save_button">Save</button>',
        ...
    });

在TinyMCE初始化中，您必须创建一个捕获Ctrl + S的设置并提交save_button类的按钮：

   tinyMCE.init({
    ...
    setup : function(ed) {
     ed.onKeyDown.add(function(ed, evt) {
        // catch crtl+s, use receiveShortCutEvent in the html-document
        if (evt.keyCode == 83 && evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
           evt.preventDefault();
           $('.save_button').submit();
       }
     });
   }

  });

<小时/> 我想在用户按下Ctrl + S时调用提交（使用TinyMCE，这对用户来说是最合乎逻辑的）。我有一篇帖子Make TinyMCE+JEditable submit after pressing ctrl+s试图解决这个问题，但我认为这个问题与JEditable有关，而不是TinyMCE。

我认为最好的方法是略微修改插件，以便在我按Ctrl + S时提交表单。

不幸的是，到目前为止我所尝试的并不起作用。下面的警报甚至没有被调用。我认为问题与tinyMCE自定义有关，因为JEditable中可以使用Esc重置的内置选项不起作用。

CODE（jquery.tinymcehelper.js）

    $.fn.tinymce = function(options){
       return this.each(function(){
          tinyMCE.execCommand("mceAddControl", true, this.id);
       });
    }

    function initMCE(){
       tinyMCE.init({
            mode : "none",
            theme : "advanced",
            plugins: "save, table, tinyautosave, imagemanager, spellchecker, autoresize",
            theme_advanced_buttons1_add_before : "tinyautosave, code, separator, delete_table",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,search,replace,|,bullist,numlist,|,outdent,indent,blockquote",
            theme_advanced_buttons2 : "undo,redo,link,unlink,code,|,forecolor,backcolor,|,insertimage,spellchecker",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            content_css : "css/tinymce.nebula.css",
            width : "700"
            ,
            setup : function(ed) {
             ed.onKeyPress.add(function(ed, evt) {
                // catch crtl+s, use receiveShortCutEvent in the html-document
                if (evt.keyCode == 83 && evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
                   setTimeout(function(){
                    var e = {type : 'keypress'};
                    e.charCode = e.keyCode = e.which = 83;
                    e.shiftKey = e.altKey = e.metaKey = false;
                    e.ctrlKey = true;
                    window.parent.receiveShortCutEvent(e); // !!! delegate created event object
                  }, 1);
               }
               });
           }

          });
    }

    initMCE();

    $.editable.addInputType('mce', {
       element : function(settings, original) {
          var textarea = $('<textarea id="'+$(original).attr("id")+'_mce"/>');
          if (settings.rows) {
             textarea.attr('rows', settings.rows);
          } else {
             textarea.height(settings.height);
          }
          if (settings.cols) {
             textarea.attr('cols', settings.cols);
          } else {
             textarea.width(settings.width);
          }
          $(this).append(textarea);
             return(textarea);
          },
       plugin : function(settings, original) {
          tinyMCE.execCommand("mceAddControl", true, $(original).attr("id")+'_mce');
          },
       submit : function(settings, original) {
    // BELOW IS MY BEST ATTEMPT. I THINK I HAVE TO HAVE SOMETHING HERE.I'VE COMMENTED OUT MY MODIFICATION
   //      input.keypress(function(e) {
   //         if ((e.ctrlKey) && (e.keyCode == 83)) {          
   //              alert("Ctrl+S pressed");
   //              e.preventDefault();
   //              tinyMCE.triggerSave();
   //              tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');    
    //         }
  //        }
 //         else {
          tinyMCE.triggerSave();
          tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
    //      }
          },
       reset : function(settings, original) {
          tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
          original.reset();
       }
    });

Answer 1

嘿@Hydra。我会告诉你一个线索。您可以在下面找到窗口上 Ctrl + S 捕获的代码段。简单地重写您的上下文。需要注意的主要事项是必须首先明确地防止事件的默认行为。

<强>被修改
并且一定要抓住keydown事件而不是keypress。 keypress不是跨浏览器解决方案。

$(window).keydown(function(event) {
  if ((event.keyCode == 83 && event.ctrlKey)){
      alert("Ctrl+S pressed");
      event.preventDefault();
  }
});

对于jEditable在代码的源代码中查找代码：

input.keydown(function(e) {
  if (e.keyCode == 27) {
    e.preventDefault();
    //self.reset();
    reset.apply(form, [settings, self]);
  }
});

并在该函数中添加另一个if语句

if (e.keyCode == 83 && e.ctrlKey) {
  e.preventDefault();
  form.submit();
  //alert("Ctrl+S Pressed!");  // Alert only here, after 2 previous lines
}

经过测试！ - 工作。

在你的情况下，你正在使用tinyMce，如果在那种情况下jEditable没有创建input，那么它可能正在创建textarea，你可以尝试在textarea上捕获该事件。如果您通过tinyMce（任何链接）向我提供jEditable的工作示例，我将能够为您提供进一步的帮助。

通过修改插件调用JEdtiable提交按钮

1 个答案: