Cannot write in text box while it's autosaving using tinymce-4 plugin

Question

I am using a plugin to autosave a textbox. However, when the autosave function is called, the text box cannot be typed into. I want users to be able to continue typing while the auto save is posted via AJAX.

tinymce.PluginManager.add('jsave', function(editor) {

// Get the form element into a jQuery object.
var $form = $(editor.formElement);

// Settings for initialization.
var settings = {
    // Interval to execute the function. Default is 15000 (ms 1000 = 1 second).
    //seconds: editor.getParam('jsave_seconds') || 2000,
    seconds: 2000,
    // This is our url that we will send data. If you want to have two different links,
    // one for ajax and one for manual post this setting is pretty useful!
    url: editor.getParam('jsave_url') || $form.attr('action'),
    // This is the callback that will be executed after the form is submitted
    callback: editor.getParam('jsave_callback')
};
$('.form_header,#attachbox').change(function (){
        tinymce.get('mail_body').isNotDirty=0;
        $("#save_status").html("Not saved");
});
var interval = setInterval(function() {
    // Quit the function if the editor is not dirty.
    if (!editor.isDirty()){
        return;
    }

    // Update the original textarea
    editor.save();

    // Create a data string from form elements.
    ds =$form.serialize();
    // $form.find(':input').each(function (i, el) {
    // $el = $(el); 
    // if($el.attr('name')!=null)
    // ds[$el.attr('name')] = $el.val(); }
    // );

    $("#save_status").html("Saving");
    $.ajax({
        url: settings.url,
        type: $form.attr('method'),
        data: ds,
        dataType:"json",
        async:false,
        success: function(msg) {
            if (settings.callback){
                //editor.setContent(msg.draft_body);
                $("#save_status").html("Saved");
                settings.callback(msg);
            }
            else{
                $("#save_status").html("Saving error");
                console.log(msg);
            }
        }
    });

}, settings.seconds);
}); //vsk.me/en/28/adding-an-autosave-plugin-to-tinymce-2#sthash.jsOruJSd.dpuf

The problem may lie in the fact that [the reference](http://vsk.me/en/28/adding-an-autosave-plugin-to-tinymce-2) you used used tinymce-2, not tinymce-4. — royhowie, Dec 10 '14 at 07:58

Ahosan Karim Asik · Accepted Answer · 2014-12-10T09:19:29.313

I have solved this problem:

just change form async:false, to async:true, in ajax calling part.

$.ajax({
        url: settings.url,
        type: $form.attr('method'),
        data: ds,
        dataType:"json",
        async:true,
        success: function(msg) {
            if (settings.callback){
                //editor.setContent(msg.draft_body);
                $("#save_status").html("Saved");
                settings.callback(msg);
            }
            else{
                $("#save_status").html("Saving error");
                console.log(msg);
            }
        }
    });

score -1 · Answer 2 · edited May 23 '17 at 12:21

Why don't you just disable it while doing the ajax call and enable again on ajax call ends?

You have a reference to enable/disable the field via JavaScript here: make readonly/disable tinymce textarea

That way you could use the complete attribute on your Ajax call to enable the field again after either succes or error response like this:

var interval = setInterval(function() {
    // Quit the function if the editor is not dirty.
    if (!editor.isDirty()){
        return;
    }

    // Update the original textarea
    editor.save();

    // Create a data string from form elements.
    ds =$form.serialize();

    $("#save_status").html("Saving");
    tinyMCE.get('textarea_id').getBody().setAttribute('contenteditable', false);

    $ajax({
        url: settings.url,
            type: $form.attr('method'),
            data: ds,
            dataType:"json",
            async:false,
            success: function(msg) {
                if (settings.callback){
                    //editor.setContent(msg.draft_body);
                    $("#save_status").html("Saved");
                    settings.callback(msg);
                }
                else{
                    $("#save_status").html("Saving error");
                    console.log(msg);
                }
            },
            error:function(){
                //DO ERROR STUFF
            },
            complete:function(){
                tinyMCE.get('textarea_id').getBody().setAttribute('contenteditable', true);
            }

    });

Cannot write in text box while it's autosaving using tinymce-4 plugin

2 Answers2