SOLUTION 1: NOT USING TINYMCE
If you're not using TinyMCE with JEditable, then look at Arman P.'s post below.
SOLUTION 2: USING 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.
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>',
...
});
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();
}
});
}
});
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.
I think the best approach is to slightly modify the plugin so that the form submits when I press Ctrl+S.
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)
$.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();
}
});