使用tinymce-4插件自动保存时无法在文本框中写入

Question

我正在使用插件自动保存一个文本框。但是，当调用autosave函数时，无法键入文本框。我希望用户能够继续输入，而自动保存是通过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

Answer 1

我已经解决了这个问题：

只需将从 async:false, 更改为ajax调用部件中的 async:true,即可。

$.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);
            }
        }
    });

Answer 2

为什么不直接在执行ajax调用时禁用它，并在ajax调用结束时再次启用？

您有一个通过JavaScript启用/禁用该字段的引用：make readonly/disable tinymce textarea

这样，您就可以在Ajax调用中使用完整的属性，在成功响应或错误响应之后再次启用字段，如下所示：

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);
            }

    });