zoukankan      html  css  js  c++  java
  • 利用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="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




  • 相关阅读:
    Linux下通用打印系统CUPS使用教程
    psql 查询表大小
    vim自动保存折叠
    VIM设置代码折叠
    使用 ipdb 调试 Python
    在 Vim 中使用 pydiction 对 Python 进行代码补全
    wget 下载整个网站,或者特定目录
    dpkg: warning: files list file for package `*****' missing, assuming package has no files currently installed解决办法
    Windows安装Redis并添加本地自启动服务并解决客户端dll报错
    windows mysql绿色版配置Mysql5.7.X
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/5383842.html
Copyright © 2011-2022 走看看