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

解决方案 1：不使用 TinyMCE

如果您没有将 TinyMCE 与 JEditable 一起使用，请查看下面 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();
       }
     });
   }

  });

---

I want to invoke submit when user presses Ctrl+S (using TinyMCE so that's the most logical for user). I had a post Make TinyMCE+JEditable submit after pressing ctrl+s that tried to address this, but the problem I think is with JEditable and not TinyMCE.

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

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

代码（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();
       }
    });

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

Edited
并且一定要抓住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
}

Tested!- 在职的。

在您的情况下，您使用的是tinyMce，如果在这种情况下 jEditable 没有创建input然后它可能正在创造textarea，您可以尝试在文本区域上捕获该事件。如果您向我提供 jEditable 与tinyMce 的工作示例（任何链接），我将能够为您提供进一步帮助。