javascript - TinyMCE - 添加键绑定(bind) CNRTL-S COMMAND-S 以调用 AJAX 保存功能

Question

我想学习如何绑定(bind) CNRTL-S 或 COMMAND-S 来调用我页面上的函数，该函数通过 AJAX 保存文本区域的内容

如何绑定(bind)这两个命令？当它只是一个文本区域时，我曾经使用过以下内容，但是自从添加了 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;
});

谢谢

Answer 1

为了使用自定义方法进行保存，我在 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;
 }

不要忘记return false 来覆盖将数据回发到服务器的默认保存操作。

---

编辑添加:我一次只允许用户更改一个 tinymce 实例。您可能想将定位当前实例更改为其他内容:)

---

编辑 #2:TinyMce 已经捕捉到 Ctrl+s 绑定(bind)来处理数据。由于它还可以清理 html 并能够处理保存时给出的特定规则，我建议的解决方案是将您的保存方式插入 tinyMce，而不是完全覆盖 Ctrl+s 绑定(bind)