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

最新推荐文章于 2020-04-24 10:31:26 发布

movie__movie

最新推荐文章于 2020-04-24 10:31:26 发布

阅读量3.6k

点赞数

分类专栏： web前端文章标签： localStorage ueditor

本文链接：https://blog.csdn.net/wangdianyong/article/details/42110301

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

直接看代码吧

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

movie__movie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用localStorage实现对ueditor编辑内容定时保存为草稿

直接看代码吧1、引入ueditor和ueditor的使用我就不细说了详情请戳http://blog.csdn.net/wangdianyong/article/details/397807092、ueditor.jsp$(document).ready(function() {var ue = UE.getEdito
复制链接

扫一扫