2011-05-06 39 views
1

解决方案1:如果你不使用TinyMCE的与JEditable,然后看看下面阿尔曼P.​​的帖子没有使用TinyMCE的调用JEdtiable提交按钮通过修改插件

解决方案2:将TinyMCE

如果您使用TinyMCE的,然后阿尔曼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(); 
     } 
    }); 

回答

1

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

编辑
而且一定要赶上​​事件不keypresskeypress不是跨浏览器的解决方案。

$(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 (e.keyCode == 83 && e.ctrlKey) { 
    e.preventDefault(); 
    form.submit(); 
    //alert("Ctrl+S Pressed!"); // Alert only here, after 2 previous lines 
} 

测试再添if声明! - 工作。

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