Сохранение редактора tinymce с AJAX и JQuery

Question

Я читал похожие вопросы по этой проблеме и смог получить довольно далеко, но, по-видимому, моя ситуация немного отличается, поэтому я все еще пытаюсь понять это.

У меня есть форма, в которой есть текстовые поля, оформленные с помощью редактора Tinymce html. Я бы хотел, чтобы textarea автоматически работала с AJAX.

Я работаю с кодом, который сохраняет текстовое поле, основанный на временном интервале:

$(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; 
    } 
} 

Это работает, но моя проблема в том, что элементы формы создаются динамически, так что я не всегда имеют статические editor_id о том, что я могу использовать. Как я могу его обновить, чтобы принимать динамические идентификаторы?

Например, вот один из прокручиваемых с это идентификатором динамично устанавливается с ASP:

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

Кроме того, я пытаюсь выяснить способ не только вызывают функцию сохранения на интервал времени , но когда пользователь щелкает из текстового поля и теряет фокус. Я не уверен, как это сделать, поскольку TinyMce, по-видимому, меняет его из текстового поля в iframe.

Любая помощь очень ценится.

Answer 1

tinyMCE.editors предоставит вам доступ ко всем редакциям на странице. См. http://www.tinymce.com/wiki.php/API3:property.tinymce.editors.

Таким образом, вы можете изменить свой код

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

Это сэкономит каждый редактор на странице каждые 30 секунд, хотя. Я не уверен, что это то, что вы хотите. Также есть tinyMCE.activeEditor, если вы хотите получить доступ к текущему активному редактору.

В ответ на вопросы ниже:

1.You должны быть в состоянии использовать событие размытия для текстовой области, чтобы вызвать ваш сохранить.

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

2.Если вы хотите получить доступ к QuesID из внутри auto_save функции, вы можете использовать

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

Answer 2

это отлично. Я сделал несколько изменений, потому что сообщение все еще срабатывало несколько раз. Кроме того, в настоящее время auto_save таймер сбрасывается, когда изменение производится:

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