使用 TinyMCE 的 Google Docs 样式自动保存答案

【问题标题】：Google Docs style Autosave using TinyMCE使用 TinyMCE 的 Google Docs 样式自动保存
【发布时间】：2012-10-26 08:28:05
【问题描述】：

我有一个使用在 LAMP 系统上运行的 TinyMCE 编辑器的表单。我希望创建一个类似于 Google Docs 的自动保存功能。然而，我想到了两种情况，两种情况都会在服务器上产生开销。

在 keyup 上发布 Ajax 请求
每 60 秒发布一次 Ajax 请求

显然第一点是不可行的。任何人都可以就第二点提出更好的解决方案吗？

编辑 1

好的，所以第三个选项可能是 Thariama 的回答和我的第二点的结合。

3) 每 60 秒发布一次 Ajax 请求，如果有重大变化，例如 10 个字符或更多

我们将不胜感激。

编辑 2

好的，我已经根据第 3 点对我的解决方案进行了原型设计。如果有人感兴趣，我的代码流程如下：

我正在使用 JQuery。我有一个带有 TinyMCE 的 textarea 表单和一个用于存储击键计数的隐藏字段。

tinyMCE.init({
  ...
  // Callback for counting keystrokes in TinyMCE
  handle_event_callback : "keyCount"
});

$(function() {
  autoSaveContent();
});

// Callback function - Get count, increment it and then set it
function keyCount(e) {
  if(e.type == "keypress") {
    var count = parseInt($("#keyCount").val());
    count++;
    $("#keyCount").val(count);
  }
}

// Autosave every 10s if there have been over 30 keystrokes
function autoSaveContent() {
  var keyCount = parseInt($("#keyCount").val());
  if(keyCount > 30) {
    tinyMCE.triggerSave();
    var formData = $("#programmedItineraryForm").serialize();
    $.post("/path/to/save.php", formData, function(data,textStatus) {
      if(data.success) {
        $("#keyCount").val(0);
      }
    });
  }
  setTimeout('autoSaveContent()',10000);
}

【问题讨论】：

您可以在编辑器失去焦点和/或每 60 秒通过 ajax 请求时触发保存。

标签： php jquery ajax tinymce google-docs

【解决方案1】：

嗯，有很多选择。第1点确实有点太贵了。我认为根据编辑器中输入的新字符数发送请求是个好主意。例如，每 5-10 个新字符发送一次请求。您可以增加一个计数器 onKeyDown 或 onKeyUp 并在发送请求时重置该计数器。

【讨论】：

【解决方案2】：

tinymce.init({
    plugins: "autosave"
});

【讨论】：

解释一下如何？
如果您不小心关闭了选项卡，它会使用本地缓存来保存您输入的任何内容。