使用 AJAX 和 Jquery 保存 tinymce 编辑器

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。如何更新它以接受动态 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>

此外，我正在尝试找出一种方法，不仅可以在某个时间间隔内调用保存函数，还可以在用户单击文本区域并失去焦点时调用。我不知道该怎么做，因为 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.您应该能够使用文本区域的模糊事件来触发您的保存。

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