AJAXとJqueryでtinymceエディタを保存する

Question

私はこの問題に似た質問を読んできましたが、かなり遠くまで到達することができましたが、明らかに私の状況はわずかに異なりますので、私はまだこれを理解しようとしています。

私はTinymce htmlエディタでスタイル設定されたテキストエリアを持つフォームを持っています。私はAJAXでテキストエリアを自動保存したいと思います。

Iは、時間間隔に基づいて、テキスト領域を節約するコードに取り組んできた。

$(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を受け入れるように更新できますか？

例えば、ここでは、動的にASPで設定されていることのidを持つテキストエリアの一つだ：

<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を参照してください。

は、だから、これは30秒ごとにかかわらず、自分のページ上のすべてのエディタ保存されます

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

にコードを変更することができます。これがあなたが望むものなのかどうかは分かりません。現在アクティブなエディタにアクセスしたい場合は、tinyMCE.activeEditorもあります。以下のご質問に対応して

：

1.Youはあなたを救うトリガするために、テキストエリアのblurイベントを使用することができるはずです。

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

あなたauto_save関数の中からQuesIDにアクセスしたい2.Ifは、あなたはこれが優れて

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