Need to autosave TinyMCE

Question

Hello,

I am looking for some help autosaving tinyMCE. I want to save the content within tiny into its respective textarea after content has been updated. So that when I make an ajax call the content is in the textarea ready to be posted.

Currently I have this little bit of code but it only updates the text area when you press a button in tiny (like bold, italics, underline, etc). I also have the link where I found the code. Any help would be appreciated.

$('.AjaxEdit textarea.tiny').tinymce({

    //other init options

    //need this function to save tiny data before Ajax call
    //http://www.webmasterkitchen.com/article/tinymce-ajax-form-submission/
    setup : function(ed) {
     ed.onChange.add(function(ed) {
      tinyMCE.triggerSave();
     });
    }
});

Answer 1

My instinct is to suggest setTimeout or setInterval, these would let save be called on a regular, recurring basis.

Answer 2

You're best bet is to adjust your AJAX call so it pulls the content straight from TinyMCE or triggerSave just before the AJAX call rather than trying to constantly have the textarea in sync with the editor content. Serialising and filtering the entire document so it can be stored on every change is a major performance hit.

If you really need to keep the textarea in sync, you'd have to add DOM modification listeners to the document in the iframe that TinyMCE creates to store the content - you can retrieve it with the getDoc() function (see http://tinymce.ephox.com/documentation/api/index.html#class_tinymce.Editor.html-getDoc). You are going to have major performance problems here though.

Regards,

Adrian Sutton
http://tinymce.ephox.com

Answer 3

You should take a look at this autosave plugin http://code.google.com/p/tinyautosave/