javascript - 使用 TinyMCE 编辑器时如何自动保存

Question

我正在使用 tinymce 编辑器来提供富文本格式，同时我想提供自动保存选项。我设法写了一个脚本来做这件事，但有一个问题。如果窗口不是当前选项卡，我不想调用该保存函数，这样就不会进行不必要的保存调用。

为了克服这个问题，我使用了 $(window).focus() 但这似乎不起作用，因为当 tinyMCE 编辑器处于焦点(意味着我正在输入它)时，不知何故窗口失去焦点(很可能是因为 tinyMCE 编辑器使用了 iFrame)，因此我的定期更新函数没有被调用。

如果编辑器有处理程序 .onFocus 我会很容易地解决这个问题，但似乎没有。谁能建议我如何克服这个问题？我的代码在下面给出

/* Function to be called for saving the blog */
function saveBlog(){

    var ed = tinymce.activeEditor;
    /* Ajax call will be done only when some changes has been made in the editor*/
    if (ed.isDirty())
    {
        ed.save();
        var link = $(this).attr("href");
        var cur_elem = $(this);
        cur_elem.html('saving...');
        cur_elem.addClass('unclickable');

        $.ajax({
            type: "POST",
            url: link,
            data: $("#blog_form :input[name!='csrfmiddlewaretoken']").serialize(),
            dataType: 'json',
             success: function(){
                cur_elem.html('Save');
                cur_elem.removeClass('unclickable');
            }
        });
    }

};


var interval_id;

/* Timer resumes when the window comes back in focus */
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(saveBlog, 5000);
});

/* Whenever window goes out of focus the timer is cleared */
$(window).blur(function() {
    clearInterval(interval_id);
        interval_id = 0;
});

/* Starts the auto saving for the first time */
$(document).ready(function(){
     interval_id = setInterval(saveBlog, 5000);
});

任何人都可以帮助解决这个问题，我只需要知道 tinyMCE 编辑器实例何时处于焦点状态，以便我可以恢复自动保存周期性功能。除了 $(window).focus

之外，我还可以添加它

Answer 1

虽然这篇文章很老了，但我写了一个插件，每隔 x 秒将表单数据发送到指定的 url。我已经写博客了here .

简单来说，思路就是创建一个iframe，动态改变表单的target和action，提交表单，激发ajax效果。保存后，我会将表单元素置于其初始状态，这样如果用户想要手动保存，他或她将不会遇到任何困难。

请注意，我编写的插件是为 tinymce4 编写的。对于旧版本，您必须稍微更改源代码。