PHP试题网_中国最大的免费网络PHP试题测试平台,PHP试卷调查,PHP试卷模板、PHP考试测验

CKEditor编辑器相当好用, 扩展丰富, 界面漂亮,有时候添加内容编辑了好久,结果网络出错或者其它方面的原因,还没提交或者一提交,数据没了,那个难受劲,为了解决这个问题,我将discuz里的自动保存草稿功能给挖出来了,用localStorage实现的,支持多浏览器,操作方便,不需要点击自动保存,效果如下:



当然实现起来也是相当简单的,只需要几段js代码就可以了,为了省空间,某些js换行给删除了,不影响使用,也没必要修改
首先是几个discuz的后台js函数,自动保存功能需要使用到,必须要有,注意这几个函数需要放在下面content_autosave.js文件之前

var cookiedomain = isUndefined(cookiedomain) ? '' : cookiedomain; var cookiepath = isUndefined(cookiepath) ? '' : cookiepath; function $$(id) {return document.getElementById(id);} function isUndefined(variable) {return typeof variable == 'undefined' ? true : false;} function setcookie(cookieName, cookieValue, seconds, path, domain, secure) { 	var expires = new Date();expires.setTime(expires.getTime() + seconds * 1000); 	domain = !domain ? cookiedomain : domain;path = !path ? cookiepath : path; 	document.cookie = escape(cookieName) + '=' + escape(cookieValue) 		+ (expires ? '; expires=' + expires.toGMTString() : '') 		+ (path ? '; path=' + path : '/') 		+ (domain ? '; domain=' + domain : '') 		+ (secure ? '; secure' : ''); } function getcookie(name) { 	var cookie_start = document.cookie.indexOf(name); 	var cookie_end = document.cookie.indexOf(";", cookie_start); 	return cookie_start == -1 ? '' : unescape(document.cookie.substring(cookie_start + name.length + 1, (cookie_end > cookie_start ? cookie_end : document.cookie.length))); } function in_array(needle, haystack) { 	if(typeof needle == 'string' || typeof needle == 'number') {     for(var i in haystack) {if(haystack[i] == needle) {return true;}}} 	return false;} function trim(str) {return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');}


然后是自动保存功能实现js文件content_autosave.js,文件内容如下,为了节省空间,删除了一些换行
代码里的editor1要特别注意,这个是编辑器要替换的textarea的ID,必须和代码里一致

function saveUserdata(name, data) { 	try { 		if(window.localStorage){localStorage.setItem('C_' + name, data); 		} else if(window.sessionStorage){sessionStorage.setItem('C_' + name, data);} 	} catch(e) { 		if(BROWSER.ie){ 			if(data.length < 54889) { 				with(document.documentElement) {setAttribute("value", data);save('C_' + name);}} 		} 	}setcookie('clearUserdata', '', -1);} function loadUserdata(name) { 	if(window.localStorage){ 		return localStorage.getItem('C_' + name); 	} else if(window.sessionStorage){ 		return sessionStorage.getItem('C_' + name); 	} else if(BROWSER.ie){ 		with(document.documentElement) {load('C_' + name);return getAttribute("value");} 	} } function deleteUserdata(name) { 	if(window.localStorage){localStorage.removeItem('C_' + name);     } else if(window.sessionStorage){sessionStorage.removeItem('C_' + name);} else if(BROWSER.ie){with(document.documentElement) {}} }  function savedataTime() { 	if(!autosave) { 		$$(editorid + '_svdsecond').innerHTML = '<a title="点击开启自动保存" style="font-weight:normal;" href="javascript:;" onclick="setAutosave()">开启自动保存</a> '; 		return; 	} 	if(!savedatac) { 		savedatac = savedataInterval;         Cautocode('svd'); 		d = new Date(); 		var h = d.getHours(); 		var m = d.getMinutes(); 		h = h < 10 ? '0' + h : h; 		m = m < 10 ? '0' + m : m; 		setEditorTip('数据已于 ' + h + ':' + m + ' 保存'); 	} 	$$(editorid + '_svdsecond').innerHTML = '<a title="点击关闭自动保存" style="font-weight:normal;" href="javascript:;" onclick="setAutosave()">' + savedatac + ' 秒后保存</a> '; 	savedatac -= 10; }  function setAutosave() { 	autosave = !autosave; 	setEditorTip(autosave ? '数据自动保存已开启' : '数据自动保存已关闭'); 	setcookie('editorautosave_' + editorid, autosave ? 1 : -1, 2592000); 	savedataTime(); }  function setEditorTip(s) {$$(editorid + '_svdsecond_tip').innerHTML = '&nbsp;' + s;}


使用方法:
首先是使用按纽连接,可以根据需要加在相应的位置,样式什么的自行修改,尽量不要改变ID,js里要用到

<span id="autosvdsecond"><span id="e_svdsecond"> <a onclick="setAutosave()" style="font-weight:normal;" href="javascript:;" title="点击关闭自动保存">30 秒后保存</a></span>&nbsp; <a id="e_svd" onclick="Cautocode('svd');return false;" style="font-weight:normal;" href="javascript:;">保存数据</a>&nbsp;&nbsp; <a id="e_rst" onclick="Cautocode('rst');return false;" style="font-weight:normal;" href="javascript:;">恢复数据</a>&nbsp;&nbsp; <a id="e_tpr" onclick="Cautocode('tpr');return false;" style="font-weight:normal;" href="javascript:;">清除内容</a>&nbsp;&nbsp;<em id="e_svdsecond_tip"></em></span>


js调用处理参数设置

<script type="text/javascript" src="../js/content_autosave.js"></script> <script type="text/javascript"> //内容自动保存 var editorid = 'e'; var savedataInterval = 30; //初始化自动保存时间间隔 30秒 var savedatac = 0; //当前自定义自动保存时间间隔 0为不定义 var autosave = 1; //是否自动保存 var savedatat = null; var site_userid = "<?php echo $userid; ?>"; if($(editorid + '_svdsecond') && savedatat === null) { //初始化自定保存 savedatac = savedataInterval; autosave = !getcookie('editorautosave_' + editorid) || getcookie('editorautosave_' + editorid) == 1 ? 1 : 0; savedataTime(); savedatat = setInterval("savedataTime()", 10000); } </script> <textarea id="editor1" name="content"></textarea>

 

 原文地址:http://www.inpy.cn/news/140.html


作者:OK兄 浏览次数:139

登 录