使用AJAX和Jquery保存tinymce編輯器

Question

我一直在閱讀與此問題相似的問題，並且能夠獲得相當遠的效果，但顯然我的情況稍有不同，所以我仍然試圖弄清楚這一點。

我有一個形式，有與Tinymce html編輯器樣式的textareas。我希望textarea使用AJAX自動保存。

我一直與代碼，保存基於時間間隔textarea的：

$(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的，我可以使用。我如何更新它以接受動態ID？

例如，這裏的文字區域之一，它的ID被動態地與ASP設置：

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

另外，我試圖找出一個方法，不僅調用上保存時間間隔功能，但是當用戶點擊textarea並且失去焦點時。我不知道如何做到這一點，因爲TinyMce顯然將其從textarea更改爲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.如果你想從你auto_save函數內部訪問QuesID，您可以使用

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