FCKEditor没有自动保存功能但受office操作习惯的影响,人们都希望有自动保存的功能.避免错误关闭,浏览器崩溃,导致自己正编辑的文章丢失.很多产品或网站都实现了这个功能.比如Discuz!等.现在我也实现一个.
我这里使用到了JQuery脚本库,后台使用asp.net.
第一部分:
// 自动保存时间间隔 var AutoSaveTime=90000; // 计时器对象 var AutoSaveTimer; // 设置自动保存状态函数 function SetAutoSave() { AutoSaveTimer = setInterval("SaveContent()", AutoSaveTime); } $(document).ready(function() { // 启动自动保存 SetAutoSave(); });
这是很简单又很自然的写法.要自动保存,就必须使用定时器,而且要在页面启动后,启动自动保存.
第二部分:
//获取内容 function SaveContent() { //editorClientID 页面上FCKEditor的ID var oEditor = FCKeditorAPI.GetInstance(editorClientID); if (!oEditor.IsDirty()) return; //文章内容 var content = oEditor.GetXHTML(true); var articleInfo = { Content: content, Title: $("#ArticleInput1_txtTitle").val() } $.post("/ArticleAutoSave.aspx", articleInfo, function(data) { if (data == "ok") { oEditor.ResetIsDirty(); } }) }
这是自动保存的核心函数:进行页面内容保存的实质操作.总的思路是首先获得编辑器的内容,ajax异步提交到asp.net后台来实现自动保存.
有两个关键点我想说一下.
if (!oEditor.IsDirty()) return; //和 if (data == "ok") { oEditor.ResetIsDirty(); }
1.我们并不是盲目的自动保存,当编辑器内容发生了变化时,我们才自动保存.IsDirty()为true表示编辑器内容发生了变化.
2.我们必须在自动保存成功 后 ,把重置Dirty状态. ResetIsDirty就是完成此工作的.服务器是否保存成功,我通过asp.net页面输出一个"ok"来标志的.
这里用到了FCKEditor API不熟悉的请参考:《FCKeditor API使用详解 》
第三部分:
本来应该是asp.net后台处理程序ArticleAutoSave.aspx页面了.这个与特定的业务有关,太简单了.就不写了.