Implementing Auto-save in TinyMCE Editor: Seeking Efficient Approach

Other Questions Google docs
1

Hey folks! I’m working on a project with TinyMCE Editor on a LAMP setup. I want to add an auto-save feature like Google Docs has. I’ve been thinking about two ways to do it:

  1. Send an Ajax request every time a key is pressed
  2. Send an Ajax request every minute

The first one seems like it would be too much for the server to handle. The second one might work, but I’m not sure if it’s the best way.

Does anyone have ideas for a better way to do this? I’m trying to find a balance between saving often enough and not overloading the server.

Update:
I’ve come up with a third option:

  1. Send an Ajax request every minute, but only if there’s been a big enough change (like 10 or more characters added)

What do you all think? Any suggestions to make this work better?

Update 2:
I’ve made a test version using option 3. Here’s how it works:

// TinyMCE setup
tinyMCE.init({
  // other settings
  on_key_press: countKeys
});

// Start auto-save when page loads
$(document).ready(startAutoSave);

// Count keypresses in TinyMCE
function countKeys(event) {
  if (event.type === 'keypress') {
    let count = Number($('#keyCounter').val());
    $('#keyCounter').val(++count);
  }
}

// Auto-save every 10 seconds if 30+ keypresses
function startAutoSave() {
  let keyCount = Number($('#keyCounter').val());
  if (keyCount > 30) {
    tinyMCE.triggerSave();
    let formInfo = $('#mainForm').serialize();
    $.post('/save', formInfo, function(response) {
      if (response.ok) {
        $('#keyCounter').val(0);
      }
    });
  }
  setTimeout(startAutoSave, 10000);
}

What do you think? Any ways to make it better?

2

I’ve tackled a similar challenge in a project before. Your approach is on the right track, but here’s a suggestion to optimize it further:

Consider implementing a ‘dirty’ flag that gets set whenever content changes. This can be more efficient than counting keystrokes. Then, use a combination of time elapsed and the dirty flag to trigger saves.

For example:

let isDirty = false;
let lastSaveTime = Date.now();

function contentChanged() {
    isDirty = true;
}

function checkAndSave() {
    const now = Date.now();
    if (isDirty && (now - lastSaveTime > 30000)) {
        // Perform save
        isDirty = false;
        lastSaveTime = now;
    }
    setTimeout(checkAndSave, 10000);
}

This approach reduces unnecessary saves while ensuring changes are captured promptly. Remember to handle network errors and provide user feedback on save status.

3

hey mate, ur idea looks solid! i’ve used somethin similar b4. one thing to consider - maybe add a ‘dirty’ flag when content changes? then u can check that flag instead of counting keypresses. also, don’t forget to handle network issues gracefully. good luck with ur project!

4

I’ve implemented a similar auto-save feature in one of my projects, and I found that a hybrid approach works best. Instead of using a fixed time interval, consider using a combination of time and content change.

Here’s what worked for me:

  1. Set up a debounce function with a short delay (say, 500ms).
  2. Trigger the debounce function on every keypress.
  3. When the debounce function fires, check if enough time has passed since the last save (e.g., 30 seconds) AND if there have been significant changes.
  4. If both conditions are met, perform the save.

This approach reduces server load while ensuring timely saves. It also accounts for periods of rapid typing and inactivity.

For detecting significant changes, you could use a diff algorithm to compare the current content with the last saved version, rather than just counting keystrokes. This catches paste events and other non-keystroke changes.

Remember to show a ‘Saving…’ indicator to the user, and handle network errors gracefully. Good luck with your implementation!