按下ctrl + s后使TinyMCE + JEditable提交 [英] Make TinyMCE+JEditable submit after pressing ctrl+s

问题描述

更新时间:2011年5月13日

Updated: May 13th, 2011

请在下面的我的答案"中找到解决方案.

Please find solution in my Answer below.

---

更新时间:2011年5月5日

---

Updated: May 5th, 2011

所以我现在遇到的问题是我想在按Ctrl + S之后调用JEDedable提交按钮.出色的Thariama显示了TinyMCE的Ctrl + S部分，因此现在我必须弄清楚如何使JEditable提交.

So the problem now I'm having is that I want to invoke the JEdtiable submit button after pressing Ctrl+S. The great Thariama has shown the Ctrl+S part for TinyMCE, so now I have to figure out how I get JEditable to submit.

按Ctrl + SI后，尝试找到提交按钮，然后根据在jeditable上调用取消.不起作用

After pressing Ctrl+S I tried to find the submit button and click it as per invoke cancel on jeditable. Doesn't work.

这是我有关JEditable初始化的相关代码:

Here's my relevant code for the 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;
        }
    }
};

任何想法都将受到欢迎！

Any thoughts would be most welcome!

---

2011年4月28日

April 28th, 2011

将TinyMCE与JEditable结合使用(按照 http: //sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin ).编辑内容后，我想按Ctrl + S提交.不幸的是，什么都没有提交，我只剩下原始内容.如果我按下提交"按钮，它确实可以工作.

Using TinyMCE with JEditable (as per http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin). After editing my content, I'd like to submit it by pressing Ctrl+S. Unfortunately, nothing gets submitted and I'm left with my original content. It does work if I press the submit button.

我尝试过:

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

推荐答案

解决方案1:不使用TINYMCE

SOLUTION 1: NOT USING TINYMCE

如果您不将TinyMCE与JEditable一起使用，请查看Arman P.的文章，网址为

If you're not using TinyMCE with JEditable, then look at Arman P.'s post at Invoke the JEdtiable Submit Button By Modifying Plugin.

解决方案2:使用TinyMCE

SOLUTION 2: USING TINYMCE

正如Thariama指出的那样，Tinymce使用iframe来编辑内容.这导致以下问题:当iframe具有焦点时，iframe将捕获"所有键盘事件.因此，您需要修改tinymce定制.

As Thariama points out, Tinymce uses an iframe for editing the content. This leads to the problem that the iframe will 'catch' all keyboard events when the iframe has focus. As such, you need to modfy the tinymce customization.

首先是在JEditable初始化中，但是给保存按钮一个类，我们将其称为"save_button":

First is in the JEditable initialization, you but give the save button a class, which we will call "save_button":

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

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

In the TinyMCE initialization, you must create a setup that catches Ctrl+S and submits the buttons of save_button class:

   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提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！