4

私はこの問題と同様の質問を読んでいて、かなり遠くまで行くことができましたが、明らかに私の状況は少し異なるので、まだこれを理解しようとしています.

Tinymce html エディターでスタイル設定されたテキストエリアを持つフォームがあります。テキストエリアを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 が常にあるとは限らないことです。動的 ID を受け入れるように更新するにはどうすればよいですか?

たとえば、ASP で動的に ID が設定されているテキストエリアの 1 つを次に示します。

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

また、時間間隔で保存機能を呼び出すだけでなく、ユーザーがテキストエリアをクリックしてフォーカスを失ったときにも呼び出す方法を見つけようとしています。TinyMce は明らかにテキストエリアから iframe に変更するため、これを行う方法がわかりません。

どんな助けでも大歓迎です。

4

2 に答える 2

4

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.テキスト領域のblurイベントを使用して、保存をトリガーできるはずです。

$(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');
于 2012-04-05T01:35:44.550 に答える
1

これは素晴らしいです。投稿がまだ複数回トリガーされたため、いくつかの変更を加えました。また、変更が行われると 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
        }
    }
});
于 2014-10-08T18:54:36.717 に答える