通过修改插件调用JEdtiable提交按钮 [英] Invoke the JEdtiable Submit Button By Modifying Plugin
问题描述
解决方案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 below.
解决方案2：使用TINYMCE
SOLUTION 2: USING TINYMCE
如果您使用TinyMCE，那么Arman Ps方法不幸的是不起作用。 Tinymce使用iframe编辑内容。这导致了iframe会在iframe有焦点时捕获所有键盘事件的问题。因此，您需要修改tinymce定制。
If you're using TinyMCE, then Arman P.s method unfortunately doesn't work. 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按钮class：
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所以这是用户最合乎逻辑的）。我有一个帖子使TinyMCE + JEditable提交后按ctrl + s 尝试解决这个问题，但是我认为的问题是JEditable而不是TinyMCE。
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。
I think the best approach is to slightly modify the plugin so that the form submits when I press Ctrl+S.
不幸的是，我迄今为止所尝试的不起作用。以下警报甚至不被呼叫。我认为这个问题与tinyMCE定制有关，因为JEditable中的内置选项可以用Esc重新设置。
Unfortunately what I've tried so far doesn't work. The alert below doesn't even get called. I think the problem has to do with the tinyMCE customization because the built-in option in JEditable where one can reset with Esc doesn't work.
CODE（jquery.tinymcehelper .js）
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();
}
});
推荐答案
嘿@Hydra。我会给你一个线索。下面您可以在窗口中找到 Ctrl + S 捕获的代码段。简单地重写你的上下文。要注意的是，您必须首先明确地阻止事件的默认行为。
Hey @Hydra. I'll give you a clue. Below you can find the code snippet for Ctrl+S capture on window. Rewrite to your context simply. The main thing to note is that you must first explicitly prevent default behavior on event.
已编辑
请务必抓住 keydown 不是 keypress 。 keypress 不是跨浏览器解决方案。
Edited
And be sure to catch keydown event not keypress. keypress is not cross-browser solution.
$(window).keydown(function(event) {
if ((event.keyCode == 83 && event.ctrlKey)){
alert("Ctrl+S pressed");
event.preventDefault();
}
});
对于插件的源代码中的jEditable查找，代码如下：
For jEditable find in sourcecode of the plugin following code:
input.keydown(function(e) {
if (e.keyCode == 27) {
e.preventDefault();
//self.reset();
reset.apply(form, [settings, self]);
}
});
并在该函数中添加另一个 if 语句
and add another if statement in that function
if (e.keyCode == 83 && e.ctrlKey) {
e.preventDefault();
form.submit();
//alert("Ctrl+S Pressed!"); // Alert only here, after 2 previous lines
}
测试！ / strong> - 工作。
Tested! - Working.
在你的情况下，你使用tinyMce，如果在这种情况下jEditable不创建输入然后创建可能 textarea ，您可以尝试在textarea上捕获该事件。如果您使用tinyMce（任何链接）为jEditable提供工作示例，我将能够进一步帮助您。
In your case you're using tinyMce and if in that case jEditable is not creating input then it's creating maybe textarea, you can try to capture that event on textarea. If you provide me with working example of jEditable with tinyMce (any link), I'll be able to help you further.
这篇关于通过修改插件调用JEdtiable提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
