Javascript TinyMCE-添加键绑定CNRTL-S COMMAND-S以调用AJAX保存函数

我想学习如何绑定CNRTL-S或COMMAND-S来调用我在页面上的函数，该函数由AJAX保存textarea的内容

如何绑定这两个命令？当它只是一个文本区域时，我曾经使用下面的代码，但是自从添加TinyMCE之后，它就不再工作了。建议

// Keybind the Control-Save
jQuery('#text_area_content').bind('keydown', 'ctrl+s',function (evt){
saveTextArea();
    return false;
});
 // Keybind the Meta-Save Mac
jQuery('#text_area_content').bind('keydown', 'meta+s',function (evt){
saveTextArea();
    return false;
});

---

谢谢

这里的问题是tinymce iframe没有将事件委托给父窗口。您可以在tinymce中定义自定义快捷方式和/或使用以下语法：

// to delegate it to the parent window i use
var create_keydown_event = function(combo){
    var e = { type : 'keydown' }, m = combo.split(/\+/);
    for (var i=0, l=m.length; i<l; i++){
        switch(m[i]){
            case 'ctrl': e.metaKey = true;
            case 'alt': case 'shift': e[m[i] + 'Key'] = true; break;
            default : e.charCode = e.keyCode = e.which = m[i].toUpperCase().charCodeAt(0);
        }
    }
    return e;
}

var handler = function(){

  setTimeout(function(){
    var e = create_keydown_event(combo);
    window.parent.receiveShortCutEvent(e);
  }, 1);
}

//ed.addShortcut(combo, description, handler);
ed.addShortcut('ctrl+s', 'save_shortcut', handler);

//将其委托给我使用的父窗口
var create\u keydown\u事件=函数（组合）{
var e={type:'keydown'}，m=combo.split（/\+/）；
对于（var i=0，l=m.length；i要使用自定义方法进行保存，我在tinymce.init方法中声明保存函数

tinyMCE.init({
        // General options
        mode: "none",
        /* some standard init params, plugins, ui, custom styles, etc */            


        save_onsavecallback: saveActiveEditor,
        save_oncancelcallback: cancelActiveEditor
    });

然后我定义函数本身

function saveActiveEditor() {
     var activeEditor = tinyMCE.activeEditor;
     var saveUrl = "http://my.ajax.path/saveStuff";
     var idEditor = activeEditor.id;
     var contentEditor = activeEditor.getContent();
     /* the next line is for a custom language listbox to edit different locales */
     var localeEditor = activeEditor.controlManager.get('lbLanguages').selectedValue;

     $.post(saveUrl ,
            { id: idEditor, content: contentEditor, locale: localeEditor },
            function(results) {
                if (results.Success) {
                    // switch back to display instead of edit
                    return false;
                }
                else {
                    activeEditor.windowManager.alert('Error saving data');
                    return false;
                }
            },
            'json'
        );
        return false;
 }

不要忘记
返回false
以覆盖将数据发回服务器的默认保存操作


编辑以添加：我只允许用户一次更改一个tinymce实例。您可能希望将当前实例的定位更改为其他内容：）


编辑#2:TinyMce已经捕获了Ctrl+s绑定来处理数据。由于它还清理html，并且能够处理保存时给出的特定规则，我建议的解决方案是插入您在TinyMce中保存的方式，而不是完全覆盖Ctrl+s绑定。我希望使用键绑定进行保存。您的答案在哪里有关键绑定的任何信息？Tinymce已经捕获了Ctrl+s组合。因此，我们不让它通过发回结果来保存，而是使用ajax调用覆盖其默认行为。由于Tinymce在节省时间方面做了很多事情，因此最好只覆盖所需内容，让它处理整个清理/动态编辑等…这似乎不起作用。它在哪里？它如何知道要查找哪个tinymce实例等。似乎不是黑客攻击。你把ed.addShortcut放在哪里？你把它放在一个插件中。你应该把这段代码放在插件的onInit中。处理程序：ed.onInit.add（ed）{…}，但您可以使用ed=tinymce.activeEditor从插件外部参照编辑器：