首页 > 代码库 > 利用localStorage实现对ueditor编辑内容定时保存为草稿
利用localStorage实现对ueditor编辑内容定时保存为草稿
直接看代码吧
1、引入ueditor和ueditor的使用我就不细说了 详情请戳http://blog.csdn.net/wangdianyong/article/details/39780709
2、ueditor.jsp
<head>
<!-- 引入jquery -->
<script type="text/javascript" src=http://www.mamicode.com/"js/jQuery2.0.js"></script>
<!-- 引入jquery结束 -->
<!-- 引入ueditor -->
<script type="text/javascript" src=http://www.mamicode.com/"ueditor/ueditor.config.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/"ueditor/ueditor.all.min.js"></script>
<!--引入ueditor结束 -->
<!-- 引入localStorage.js -->
<script type="text/javascript" src=http://www.mamicode.com/"js/localStorage.js"></script>
<!-- 引入localStorage.js结束 -->
<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=http://www.mamicode.com/"提交">
</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"));
}
}
});
基本的定时保存为草稿的内容就实现了，你可关闭你的浏览器重新打开页面发现自己以前编辑的内容并没有因意外情况的出现而丢失。
源代码下载地址
利用localStorage实现对ueditor编辑内容定时保存为草稿