Saving tinymce editor with AJAX and Jquery

Question

I've been reading similar questions to this issue and have been able to get pretty far, but apparently my situation is slightly different so I'm still trying to figure this out.

I have a form that has textareas that are styled with the Tinymce html editor. I would like the textarea to autosave with AJAX.

I have been working with code that saves the textarea based on a time interval:

$(document).ready(function() {

$(function() {
// Here we have the auto_save() function run every 30 secs
    // We also pass the argument 'editor_id' which is the ID for the textarea tag
    setInterval("auto_save('editor_id')",30000);
});

});

// Here is the auto_save() function that will be called every 30 secs
function auto_save(editor_id) {

// First we check if any changes have been made to the editor window
    if(tinyMCE.getInstanceById(editor_id).isDirty()) {
    // If so, then we start the auto-save process
        // First we get the content in the editor window and make it URL friendly
        var content = tinyMCE.get(editor_id);
        var notDirty = tinyMCE.get(editor_id);
        content = escape(content.getContent());
        content = content.replace("+", "%2B");
        content = content.replace("/", "%2F");
        // We then start our jQuery AJAX function
        $.ajax({
        url: "PAFormAJAX.asp", // the path/name that will process our request
            type: "POST", 
            data: "itemValue=" + content, 
            success: function(msg) {
                alert(msg);
                // Here we reset the editor's changed (dirty) status
                // This prevents the editor from performing another auto-save
                // until more changes are made
                notDirty.isNotDirty = true;
            }
        });
        // If nothing has changed, don't do anything
    } else {
        return false;
    }
}

This is working, but my problem is, the form elements are created dynamically so I don't always have static editor_id's that I can use. How can I update it to accept dynamic ID's?

For example, here's one of the textareas with it's id being dynamically set with ASP:

<textarea id="Com<%=QuesID%>" row= "1" cols= "120" name="Com<%=QuesID%>" QuesID="<%=QuesID%>" wrap tabindex="21" rows="10" class="formTxt"><%=TempTxt%></textarea>

Also, I'm trying to figure out a way to not only call the save function on a time interval, but when the user clicks out of the textarea and it looses focus. I'm not sure how to do this since TinyMce changes it from a textarea to an iframe apparently.

Any help is greatly appreciated.

Answer 1

tinyMCE.editors will give you access to all of the editors on the page. Seehttp://www.tinymce.com/wiki.php/API3:property.tinymce.editors .

So you can change your code to

$(document).ready(function() {
    setInterval(function() { 
        for (edId in tinyMCE.editors)
            auto_save(edId);
    },30000);
});

This will save every editor on your page every 30 seconds though. I'm not sure if this is what you want. There's also tinyMCE.activeEditor if you just want access to the currently active editor.

In response to your questions below:

1.You should be able to use the blur event for the text area to trigger your save.

$(document).ready(function() {
    for (edId in tinyMCE.editors) {
        $('#' + edId).blur(function() {
            auto_save($(this).attr('id'));
        });
    }
});

2.If you want access to the QuesID from inside your auto_save function, you can use

var quesId = $('#' + editor_id).attr('QuesID');

Answer 2

this is excellent. I made a few changes because the post still was triggered multiple times. Also, now the auto_save timer is reset when a change is made:

$.status = function (message) {
    $('#statusMsg').html('<p>' + message + '</p>');
};
$.status('log div');

$(document).ready(function () {
var myinterval;    

//for version 4.1.5 
    tinymce.init({
        selector: 'textarea',
        width: "96%",
        height: "200",
        statusbar: true,
        convert_urls: false,
        plugins: [
            "advlist autolink lists charmap print preview",
            "searchreplace fullscreen",
            "insertdatetime paste autoresize"
        ],
        toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        external_plugins: {"nanospell": "/Scripts/nanospell/plugin.js"},
        nanospell_server: "asp.net", // choose "php" "asp" "asp.net" or "java"

        setup: function (ed) {  //start a 30 second timer when an edit is made do an auto-save 
            ed.on('change keyup', function (e) {
                //clear the autosave status message and reset the the timers
                $.status('');
                clearInterval(myinterval);
                myinterval = setInterval(function () {
                    for (edId in tinyMCE.editors)
                        auto_save(edId);
                }, 30000); //30 seconds
            });
        }
    });

    // Here is the auto_save() function that will be called every 30 secs
    function auto_save(editor_id) {
        var editor = tinyMCE.get(editor_id);
        if (editor.isDirty()) {
            var content = editor.getContent();
            content = content.replace("+", "%2B"); 
            content = content.replace("/", "%2F");
            $.ajax({
                type: "POST",
                url: "/PlanningReview/Save",
                data: "itemValue=" + content,
                cache: true,
                async: false,   //prevents mutliple posts during callback
                success: function (msg) {
                    $.status(msg)
                }
            });
        }
        else {
            return false;        // If nothing has changed, don't do anything
        }
    }
});