Question

更新时间：2011年5月13日

请在下面的答案中找到解决方案。

<小时/> 更新日期：2011年5月5日

所以我现在遇到的问题是我想在按Ctrl + S后调用JEdtiable提交按钮。伟大的Thariama已经为TinyMCE展示了Ctrl + S部分，所以现在我必须弄清楚如何让JEditable提交。

按下Ctrl + S后，我尝试找到提交按钮并按invoke cancel on jeditable点击它。不行。

这是我的JEditable Initialization的相关代码：

    //Edit Note
$(function(){
   $(".edit").editable('ajax/save.php?editnotetext', {
      type : 'mce',
      submit : '<button class="save_button">Save</button>',
      cancel: 'Cancel',
      event: 'dblclick',
      indicator : 'Saving...',
      tooltip : 'Doubleclick to edit...',
      onblur: 'ignore',
      width : '700px',
      height : '100px'
   });
});

这是我尝试提交的代码

var receiveShortCutEvent = function(e) {
  if (e.ctrlKey){
        //console.log('e.keyCode:',e.keyCode);
        var handled = true; // default case set this to false which lets the browser execute a browsershortcut if existent
        switch (e.keyCode){   // be careful that keyCode may differ in browsers sometimes 
          case 83 : 
              $('.edit').find('.save_button').click();
              break;

          default : handled = false;
        }
    }
};

任何想法都会受到欢迎！

<小时/>

2011年4月28日

将TinyMCE与JEditable一起使用（根据http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin）。编辑完我的内容后，我想按Ctrl + S提交。不幸的是，没有任何内容被提交，我留下原始内容。如果我按下提交按钮，它确实有效。

我试过了：

$(function(){
    $(".edit").keypress(function(event) {
        if ((event.which == 115 && event.ctrlKey)){
            alert("you pressed ctrl-s!");
            $(this).submit();
        }
    });


   $(".edit").editable('ajax/save.php?editnotetext', {
      type : 'mce',
      submit : 'save',
      cancel: 'cancel',
      indicator : 'Saving...',
      tooltip : 'Click to edit...',
      onblur: 'ignore',
      width : '500px',
      height : '100px'
   });
});

Answer 1

看一下这些用于创建键盘快捷键的jquery插件。这可能就是你要找的东西。

hotkeys

js-hotkeys

Answer 2

这是一件有点特别的事情。这里的问题是tinymce（和每个强大的rte）使用iframe来编辑内容。这导致iframe将在iframe具有焦点时“捕获”所有键盘事件的问题。我将告诉你我为解决这个问题做了什么

在你的tinymce init（或你的一个插件）中，你需要设置以下

// 83 instead of 73 as keyCode here !!!!!!!!
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) {
    setTimeout(function(){
      var e = { type : 'keydown'};
      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);
  }
 });
},

在html文档（或包含的js文件）中，您需要设置此

// init in the main document
// Keydown events on the main document will call receiveShortCutEvent
$(document).bind('keydown', function(e)
{
    var handled = receiveShortCutEvent(e); 
    return !handled;
});

您还需要在此处定义如何处理快捷方式

var receiveShortCutEvent = function(e)
{
  if (e.ctrlKey){
    //console.log('e.keyCode:',e.keyCode);
    var handled = true; // default case set this to false which lets the browser execute a browsershortcut if existent
    switch (e.keyCode){   // be careful that keyCode may differ in browsers sometimes 
      case 83 : 
          alert("you pressed ctrl-s!");
          break;

      default : handled = false;
  }
}

Answer 3

解决方案1：不使用TINYMCE

如果您没有使用带有JEditable的TinyMCE，请查看Arman P.在Invoke the JEdtiable Submit Button By Modifying Plugin的帖子。

解决方案2：使用TINYMCE

正如Thariama指出的那样，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 + JEditable提交

3 个答案: