通过修改插件调用JEdtiable提交按钮
解决方案1：不使用TINYMCE
如果你没有使用带有JEditable的TinyMCE，那么请看下面的Arman P.的post。
解决方案2：使用TINYMCE
如果你正在使用TinyMCE，那么遗憾的是，Arman Ps方法不起作用。 Tinymce使用iframe编辑内容。 这会导致iframe在iframe具有焦点时“捕获”所有键盘事件的问题。 因此，您需要修改tinymce定制。
首先是在JEditable初始化中，你给保存按钮一个类，我们称之为“save_button”：
$(".edit").editable('ajax/save.php?editnotetext', { type : 'mce', submit : '', ... }); 在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，这对用户来说是最合乎逻辑的）。 我按下ctrl + s之后有一个postMake TinyMCE + JEditable提交试图解决这个问题，但我认为问题是JEditable而不是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 = $(''); 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捕获的代码段。 简单地重写您的上下文。 需要注意的主要事项是您必须首先明确地防止事件的默认行为。
编辑
并且一定要抓住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的工作示例，我将能够进一步帮助您。