利用localStorage实现对ueditor编辑内容定时保存为草稿

来源：互联网发布：万维软件多少钱编辑：程序博客网时间：2024/04/29 15:04

直接看代码吧

1、引入ueditor和ueditor的使用我就不细说了详情请戳http://blog.csdn.net/wangdianyong/article/details/39780709

2、ueditor.jsp

<head>

<script type="text/javascript" src="js/jQuery2.0.js"></script>


<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js"></script>


<script type="text/javascript" src="js/localStorage.js"></script>


<script type="text/javascript">
$(document).ready(function() {
var ue = UE.getEditor('container');
ue.addListener("ready", function() {
// editor准备好之后才可以使用
var html = localStorage.getItem("ctValue");
alert(html);
ue.setContent(html);

});

});
</script>
</head>

<body>

${param.content }
<p>
<span id="span" name="span"></span>
</p>
<form action="ueditor.jsp" method="post">

<script id="container" name="content" type="text/plain"
style="width:800px;height:400px;">
</script>

<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
<input type="submit" value="提交">
</form>

</body>

localStorage.js

$(document).ready(
function() {

if (!window.localStorage) {
alert('您的浏览器不支持 localStorage 技术!');
} else {
// var spanObj = $("span");
// alert("spanObj" + spanObj);
var saveTimer = setInterval(
function() {
var str = "";
if (document.all) {/* IE */
str = document.frames[1].document.body.innerHTML;
} else {/* Chrome,ff */
// str =
// document.getElementById("container").contentDocument.body.innerHTML;
var ue = UE.getEditor('container');
str = ue.getContent();
}
if (str.length > 20
&& (str.indexOf("。") > -1 || str
.indexOf("，") > -1)) { /*
* 有内容才保存
* 且有句号或逗号
*/
localStorage.setItem("ctValue", str);
var d = new Date();
var YMDHMS = d.getFullYear() + "-"
+ (d.getMonth() + 1) + "-"
+ d.getDate() + " "
+ d.getHours() + ":"
+ d.getMinutes() + ":"
+ d.getSeconds();
// alert(YMDHMS);
// spanObj.innerHTML = '（数据保存于: ' +
// YMDHMS
// + '）';
// var text = $("span").text = '（数据保存于: '
// + YMDHMS + '）';
$("#span").text('（数据保存于: ' + YMDHMS + '）');

// alert(text);
setTimeout(function() {
// spanObj.innerText = '';
}, 5000);
}
}, 25000); // 每隔N秒保存一次
function stoplocs() {
clearInterval(saveTimer); // 停止保存
// localStorage.removeItem("ctValue"); //清空
}
function showlocs() {
var html = localStorage.getItem("ctValue");
editor.setContent(html);
// alert(localStorage.getItem("ctValue"));
}
}
});

基本的定时保存为草稿的内容就实现了，你可关闭你的浏览器重新打开页面发现自己以前编辑的内容并没有因意外情况的出现而丢失。

源代码下载地址http://download.csdn.net/detail/wangdianyong/8292399

0 0