直接看代码吧

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"));

}

}

});

主要的定时保存为草稿的内容就实现了，你可关闭你的浏览器又一次打开页面发现自己曾经编辑的内容并没有因意外情况的出现而丢失。

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

利用localStorage实现对ueditor编辑内容定时保存为草稿的更多相关文章

  1. 利用C#实现对excel的写操作

    一.COM interop 首先我们要了解下何为COM Interop,它是一种服务,可以使.NET Framework对象能够与COM对象通信.Visual Studio .NET 通过引入面向公共 ...

  2. ASP.NET中利用Split实现对Checkbox的字符串分离放到DataTable里面

    一.背景 昨天唐欢问了我一个问题: 现在有一个CheckBox和一个Label如下图: 要实现选中CheckBox,点击下面打印按钮的时候要做成这个样子的如下图: 简单的说就是档案编号作为表中的一个列 ...

  3. 利用Python实现对Web服务器的目录探测

    今天是一篇提升技能的干货分享,操作性较强,适用于中级水平的小伙伴,文章阅读用时约3分钟. PART 1/Python Python是一种解释型.面向对象.动态数据类型的高级程序设计语言. Python ...

  4. 利用 python 实现对web服务器的目录探测

    一.pythonPython是一种解释型.面向对象.动态数据类型的高级程序设计语言.python 是一门简单易学的语言,并且功能强大也很灵活,在渗透测试中的应用广泛,让我们一起打造属于自己的渗透测试工 ...

  5. Python利用Plotly实现对MySQL中的数据可视化

    Mysql表数据: demo.sql内容 create table demo( id int ,product varchar(50) ,price decimal(18,2) ,quantity i ...

  6. 通过监听键盘，实现对UITextView的内容移动

    视图出现时,增加观察 - (void)viewWillAppear:(BOOL)animated { // 增加对键盘的监听 [[NSNotificationCenter defaultCenter] ...

  7. 利用WebClient实现对Http协议的Post和Get对网站进行模拟登陆和浏览

    我们在一些场合经常需要模拟浏览器进行一些操作,比如模拟投票,或者模拟点击,或者Web游戏外挂.而C#中封装好的WebClient可以在某些要求不算搞的场景实现Http的Post和Get.具体请见代码: ...

  8. C# 实现对PPT编辑

    C# Presentation 文本替换 我们可以通过插入占位符的方式,使用新的字词替换已有幻灯片里的文字. 本文将详细描述如何使用Spire.Presentation 来替换Prsentation ...

  9. 利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理

    在我们开发Web API应用的时候,我们可以借鉴ABP框架的过滤器Filter和特性Attribute的应用,实现对Web API返回结果的封装和统一异常处理,本篇随笔介绍利用AuthorizeAtt ...

随机推荐

  1. post提交数据的四种编码方式

    这里总结下post提交数据的四种方式. 参考文章: https://www.jianshu.com/p/3c3157669b64

  2. java通过POI和easypoi实现Excel的导出

    前言 在工作经常会遇到excel导出报表的功能,自己也做过一些,然后在项目里看到同事封装的一个excel导出工具类,着实不错,拿来分享一下.然后,又在网上看到一个使用easypoi实现cxcel导出的 ...

  3. 一步一步学习IdentityServer4 (4) 处理特殊需求之-登录等待页面

    用IdentityServer3的时候登录如果采用Post方式大家会发现有中间有一个等待Submit空白页面,界面不友好,现在我想把这个修改自定义的页面Loading 在Identityserver3 ...

  4. Java第三阶段学习（二、IO流--------递归，字节流Stream）

    一.递归 定义:指方法在方法内调用自己 适用于方法的运算主体不变,但运行的时候,参与运算的方法参数会变化注意:一定要给递归一个出口,否则内存溢出 练习题1:使用递归打印文件夹中所有的文件,包含子目录中 ...

  5. Django实战（7）：改造ProductList界面

    有了上一节关于Django模板的基础,改造界面就很容易理解了.将界面设计师设计的页面中的内容根据复用程度分别放到基础模板base.html和专用模板productlist.html中. depot/t ...

  6. Bad connection to FS. command aborted. exception: Call to chaoren/192.168.80.100:9000 failed on connection exception: java.net.ConnectException: Connection refused

    Bad connection to FS. command aborted. exception: Call to chaoren/192.168.80.100:9000 failed on conn ...

  7. react篇章-React State(状态)-组件都是真正隔离的

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  8. MIT-6.828-JOS-lab1:C, Assembly, Tools, and Bootstrapping

    Lab1:Booting a PC 概述 本文主要介绍lab1,从内容上分为三部分,part1简单介绍了汇编语言,物理内存地址空间,BIOS.part2介绍了BIOS从磁盘0号扇区读取boot loa ...

  9. 组装者模式在React Native项目中的一个实战案例

    前言 在实际的开发中,如果遇到多个组件有一些共性,我们可以提取一个BaseItem出来,然后在多个组件中进行复用,一种方式是通过继承的方式,而今天我们要说的是另一种方式--组装者模式. 什么是组装者模 ...

  10. 系统导出数据到excel，数据量过大（大约10W）条，导致服务器 cpu 100%解决方法

    系统导出数据到excel,数据量过大(大约10W)条,导致服务器 cpu 100%解决方法