利用localStorage实现对ueditor编辑内容定时保存为草稿
直接看代码吧
1、引入ueditor和ueditor的使用我就不细说了 详情请戳http://blog.csdn.net/wangdianyong/article/details/39780709
2、ueditor.jsp
<head>
<!-- 引入jquery -->
<script type="text/javascript" src="js/jQuery2.0.js"></script>
<!-- 引入jquery结束 -->
<!-- 引入ueditor -->
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js"></script>
<!--引入ueditor结束 -->
<!-- 引入localStorage.js -->
<script type="text/javascript" src="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="提交">
</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编辑内容定时保存为草稿的更多相关文章
- 利用C#实现对excel的写操作
一.COM interop 首先我们要了解下何为COM Interop,它是一种服务,可以使.NET Framework对象能够与COM对象通信.Visual Studio .NET 通过引入面向公共 ...
- ASP.NET中利用Split实现对Checkbox的字符串分离放到DataTable里面
一.背景 昨天唐欢问了我一个问题: 现在有一个CheckBox和一个Label如下图: 要实现选中CheckBox,点击下面打印按钮的时候要做成这个样子的如下图: 简单的说就是档案编号作为表中的一个列 ...
- 利用Python实现对Web服务器的目录探测
今天是一篇提升技能的干货分享,操作性较强,适用于中级水平的小伙伴,文章阅读用时约3分钟. PART 1/Python Python是一种解释型.面向对象.动态数据类型的高级程序设计语言. Python ...
- 利用 python 实现对web服务器的目录探测
一.pythonPython是一种解释型.面向对象.动态数据类型的高级程序设计语言.python 是一门简单易学的语言,并且功能强大也很灵活,在渗透测试中的应用广泛,让我们一起打造属于自己的渗透测试工 ...
- Python利用Plotly实现对MySQL中的数据可视化
Mysql表数据: demo.sql内容 create table demo( id int ,product varchar(50) ,price decimal(18,2) ,quantity i ...
- 通过监听键盘,实现对UITextView的内容移动
视图出现时,增加观察 - (void)viewWillAppear:(BOOL)animated { // 增加对键盘的监听 [[NSNotificationCenter defaultCenter] ...
- 利用WebClient实现对Http协议的Post和Get对网站进行模拟登陆和浏览
我们在一些场合经常需要模拟浏览器进行一些操作,比如模拟投票,或者模拟点击,或者Web游戏外挂.而C#中封装好的WebClient可以在某些要求不算搞的场景实现Http的Post和Get.具体请见代码: ...
- C# 实现对PPT编辑
C# Presentation 文本替换 我们可以通过插入占位符的方式,使用新的字词替换已有幻灯片里的文字. 本文将详细描述如何使用Spire.Presentation 来替换Prsentation ...
- 利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理
在我们开发Web API应用的时候,我们可以借鉴ABP框架的过滤器Filter和特性Attribute的应用,实现对Web API返回结果的封装和统一异常处理,本篇随笔介绍利用AuthorizeAtt ...
随机推荐
- Proxy 代理
意图 为其他对象提供一种代理以控制对这个对象的访问 动机 对一个对象进行访问控制的原因是为了只有在我们确实需要这个对象时才对它进行创建和初始化 典型例子:智能指针的实现,通过引用计数来决定“=” 复制 ...
- 【LOJ】#2290. 「THUWC 2017」随机二分图
题解 看了一眼觉得是求出图对图统计完美匹配的个数(可能之前做过这样模拟题弃疗了,一直心怀恐惧... 然后说是统计一下每种匹配出现的概率,也就是,当前左边点匹配状态为S,右边点匹配状态为T,每种匹配出现 ...
- 【AtCoder】AGC023 A-F题解
可以说是第一场AGC了,做了三道题之后还有30min,杠了一下D题发现杠不出来,三题滚粗了 rating起步1300+,感觉还是很菜... 只有三题水平显然以后还会疯狂--啊(CF的惨痛经历) 改题的 ...
- HDU 3530 单调队列
题目大意:给你n个数, 让你问你最长的满足要求的区间有多长,区间要求:MAX - MIN >= m && MAX - MIN <= k 思路:单调队列维护递增和递减,在加入 ...
- Hadoop整理三(Hadoop分布式计算框架MapReduce)
一.概念 MapReduce是一种编程模型,用于大规模数据集(大于1TB)的并行运算.概念"Map(映射)"和"Reduce(归约)",是它们的主要思想.它极大 ...
- JAVAEE——宜立方商城08:Zookeeper+SolrCloud集群搭建、搜索功能切换到集群版、Activemq消息队列搭建与使用
1. 学习计划 1.solr集群搭建 2.使用solrj管理solr集群 3.把搜索功能切换到集群版 4.添加商品同步索引库. a) Activemq b) 发送消息 c) 接收消息 2. 什么是So ...
- 1go基本语法
// week1 project main.go//导入一个包(目录) package main //导入方法 import "fmt" //createMessage函数(参数, ...
- Git 入门使用
Git是什么? Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制 ...
- 20162303 解读同伴的收获&解决同伴的问题 周三补交
解读同伴的收获&解决同伴的问题 11月29号 解决同伴的问题 我的同组同学是20162307学号张韵琪同学 同组同学的问题是动态规划算法步骤中递归定义的最优值 我理解他的意思是她不太理解最优值 ...
- bzoj 4033
树形DP,dp[i][j]表示i子树中,选了j个白点,i子树中所有边的贡献. /************************************************************ ...