我一直在阅读与此问题类似的问题,并且已经取得了很大的进展,但显然我的情况略有不同,所以我仍在尝试解决这个问题。
我有一个表单,其中的文本区域使用 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。
非常感谢任何帮助。
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');
这太棒了。我做了一些更改,因为该帖子仍然被触发多次。 另外,现在当进行更改时,自动保存计时器会重置:
$.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
}
}
});
现在您可以动态创建编辑器并为每个编辑器提供唯一的 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
}
});
}