CKEditor编辑器自动保存草稿功能localStorage实现

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>

到这里,功能就可以如效果图一样实现了, 每30秒保存一次, 再也不怕内容会丢失