Speichern tinymce Editor mit AJAX und Jquery

Question

Ich habe ähnliche Fragen zu diesem Thema gelesen und in der Lage, ziemlich weit zu bekommen, aber anscheinend ist meine Situation etwas anders, so dass ich immer noch versuche, das herauszufinden.

Ich habe ein Formular, das Textareas hat, die mit dem Tinymce HTML-Editor formatiert sind. Ich möchte, dass das Textfeld mit AJAX automatisch gespeichert wird.

Ich habe mit Code arbeiten, die die Textarea speichert basierend auf einem Zeitintervall:

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

Dies funktioniert, aber mein Problem ist, werden die Formelemente dynamisch erstellt, damit ich nicht immer haben statische editor_id ist, die ich verwenden kann. Wie kann ich es aktualisieren, um dynamische IDs zu akzeptieren?

Zum Beispiel ist hier eines der Textfelder mit er ist id dynamisch mit ASP gesetzt wird:

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

Auch ich versuche, einen Weg, um herauszufinden, um nicht nur die Funktion auf einem Zeitintervall speichern rufen , aber wenn der Benutzer aus dem Textfeld klickt und der Fokus verliert. Ich bin nicht sicher, wie dies zu tun ist, da TinyMce es anscheinend von einem Textarea zu einem iframe ändert.

Jede Hilfe wird sehr geschätzt.

Answer 1

tinyMCE.editors gibt Ihnen Zugriff auf alle Editoren auf der Seite. Siehe http://www.tinymce.com/wiki.php/API3:property.tinymce.editors.

So können Sie Ihren Code

ändern

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

Diese obwohl alle 30 Sekunden auf Ihrer Seite jeden Editor sparen. Ich bin mir nicht sicher, ob du das willst. Es gibt auch tinyMCE.activeEditor, wenn Sie nur auf den gerade aktiven Editor zugreifen möchten.

Als Antwort auf Ihre Fragen unter:

1.You sollte Ihre Lage sein, das Unschärfe-Ereignis für den Textbereich zu verwenden, um auslösen zu speichern.

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

2. Wenn Sie Zugriff auf die QuesID wollen aus Ihrem auto_save Funktion können Sie

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

Answer 2

dies ist hervorragend verwenden. Ich habe ein paar Änderungen vorgenommen, weil die Post immer noch mehrfach ausgelöst wurde. Auch jetzt das auto_save Timer wird zurückgesetzt, wenn eine Änderung vorgenommen wird:

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