使用AJAX和Jquery保存tinymce编辑器

问题描述 投票:0回答:3

我一直在阅读与此问题类似的问题,并且已经取得了很大的进展,但显然我的情况略有不同,所以我仍在尝试解决这个问题。

我有一个表单,其中的文本区域使用 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?

例如,这是一个文本区域,其 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 显然将其从文本区域更改为 iframe。

非常感谢任何帮助。

jquery ajax
3个回答
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.您应该能够使用文本区域的模糊事件来触发保存。

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

1
投票

这太棒了。我做了一些更改,因为该帖子仍然被触发多次。 另外,现在当进行更改时,自动保存计时器会重置:

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

0
投票

现在您可以动态创建编辑器并为每个编辑器提供唯一的 id,然后获取每个 id 的内容并存储在数组中,稍后通过 ajax 调用传递到数据库

function auto_save() {
  var editorContents = [];

  for (var i = 1; i <= editorCount; i++) {
    var textareaId = "editorId" + i;
    //check if any changes have been made to the editor window
    if (tinyMCE.get(textareaId).isDirty()) {
      // Start the auto-save process
      // Get the content in the editor window and make it URL friendly
      var content = tinyMCE.get(textareaId);
      var notDirty = tinyMCE.get(textareaId);
      content = escape(content.getContent());
      content = content.replace("+", "%2B");
      content = content.replace("/", "%2F");

      // Add the editor to the array
      editorContents.push({
        id: textareaId,
        content: content,
      });
      notDirty.isNotDirty = true;
    } else {
      return null;
    }

    // now  u can store each editor content if it is changed  in array and pass  
    saveEditorContents(editorContents);
  }
}

function saveEditorContents(contents) {
  $.ajax({
    url: "PAFormAJAX.asp", // the path/name that will process our request
    type: "POST",
    data: JSON.stringify({
      EditorContents: contents
    }),
    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

    }
  });
}

© www.soinside.com 2019 - 2024. All rights reserved.