Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Docs style Autosave using TinyMCE

I have a form using the TinyMCE Editor running on a LAMP system. I wish to create an autosave feature similar to Google Docs. I have thought of two scenarios however, both will produce an overhead on the server.

  1. Post an Ajax request on keyup
  2. Post an Ajax request every 60s

Obviously the first point is not feasible. Can anyone suggest a better solution to point two?

Edit 1

Ok, so a third option could be a combination of Thariama's answer and my second point.

3) Post an Ajax request every 60s if there is signifcant change eg 10 chars or more

Any advances on this would be much appreciated.

Edit 2

Ok I have prototyped my solution based on point 3. In case anyone is interested my code flows like this:

I am using JQuery. I have a form with a textarea with TinyMCE attached to it and a hidden field to store a count of keystrokes.

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);
}
like image 925
amburnside Avatar asked Nov 04 '22 13:11

amburnside


1 Answers

Hmm, there are many options. Point 1 is indeed a bit too expensive. I think it would be a good idea to send a request based on the number of new characters entered in the editor. For example send a request every 5-10 new characters. You can increment a counter onKeyDown or onKeyUp and reset that counter when a request gets send.

like image 178
Thariama Avatar answered Nov 09 '22 07:11

Thariama