欢迎访问 licqi IT技术
我们一直在努力

xajax为fckeditor添加自动保存功能

注:­

1.使用的xajax版本是0.5.4beta,fckeditor版本是2.4.3,通过xajax给fckeditor增加自动保存草稿功能,其他版本未测试­

2.文章原创 原文发表在 http://xajax.dayanmei.com/20.htm­

3.请不要尝试,关闭浏览器后再载入【因为演示使用session关联用户,做项目时可以将内容存储到数据库,跟用户id关联就可以了】­

难点:­

xajax获取编辑器的内容和替换编辑器的内容­

xajax.$(‘contentid’).value 这样获取的是初始的编辑器内容­

而使用xajax->assign(‘contentid’,’value’,$content)替换也无效,因为这样替换的其实是隐藏表单<input value=””>的内容,通过发掘fckeditor的sample,找到了答案,见下面文档的javascript,GetContents 获取编辑器内容,SetContents替换编辑器内容,然后透过xajax的call函数调用javascript函数­

要点:­

如何自动执行保存函数­

透过setInterval可以设定隔定时间执行某个函数­

fckeditor自动保存草稿演示地址­

http://xajax.dayanmei.com/demo/xajax2fckeditor/­

完整演示下载­

<?php

session_start();­

define('ROOT_DIR',str_replace("\","/",dirname(__FILE__)));­

$cachedir = './cache/';­

//清除超过1天的记录文件­

function clearcache($dir,$date = 1) {­

$now = time();­

$time = $date * 60 * 60 * 24;­

if(!is_dir($dir)){­

die('error :dir' . $dir . ' is not exist'); ­

}­

$handle = opendir($dir);­

while(false !== ($filename = readdir($handle))) {­

if($filename == '.' OR $filename == '..' OR $filename == ''){­

continue;­

}­

if(($now - filemtime($dir.$filename)) > $time){­

@unlink($dir.$filename);­

}­

}­

}­

//替换特殊字符­

function xml_escape($string) {­

return str_replace(array('&','"',"'",'<','>'),­

array('&','"',''','<','>'),­

$string    ­

);­

}­

//执行清理­

clearcache($cachedir);­

require_once('./xajax/xajax.inc.php');­

$xajax = new xajax();­

$xajax->registerFunction('autosave');­

$xajax->registerFunction('loadcache');­

$xajax->processRequest();­

echo $xajax->getJavascript('./xajax');­

//定义载入数据函数­

function loadcache() {­

global $cachedir;­

$filename = $cachedir . session_id().'.txt';­

if(file_exists($filename)){­

$content = '';­

$handle = file($filename);­

foreach($handle as $key=>$val) {­

$content .= $val;­

}­

}else{­

$content = '';­

}­

$content = xml_escape($content);­

$obj = new xajaxResponse();­

$obj->call("SetContents('$content')");­

$obj->assign('autosavemsg','innerHTML',"成功载入数据");­

return $obj;­

}­

//定义自动保存函数­

function autosave($content) {­

global $cachedir;­

$obj = new xajaxResponse();­

$content = mysql_escape_string($content);­

$filename = $cachedir . session_id() . ".txt";­

$fp = fopen($filename,"w+");­

fwrite($fp,$content);­

fclose($fp);­

if(file_exists($filename)){­

$obj->assign("autosavemsg","innerHTML","成功保存数据...");­

}­

return $obj;­

}­

function editor($editorid,$content = '') {­

//载入编辑器­

require_once('./fckeditor/fckeditor.php');­

$editor = new fckeditor($editorid);­

$editor->ToolbarSet = 'Basic';­

$editor->BasePath = '../fckeditor/';­

$editor->Value = $content;­

return $editor->createhtml();­

}­

?>­

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">­

<html xmlns="http://www.w3.org/1999/xhtml">­

<head>­

<meta http-equiv="Content-Type" c />­

<title></title>­

<meta c />­

</head>­

<body>­

<form id="f1" method="post" action="" enctype="multipart/form-data">­

<?php­

//载入编辑器­

echo editor('content');­

?>­

<script language="javascript">­

<!--­

// 自动保存时间间隔­

var AutoSaveTime=90000;­

// 计时器对象­

var AutoSaveTimer;­

// 首先设置一次自动保存状态­

SetAutoSave();­

// 设置自动保存状态函数­

//关键是这个 他设定间隔(AutoSaveTime)时间执行什么函数(这里是GetContents)­

function SetAutoSave() {­

AutoSaveTimer=setInterval("GetContents('content')",AutoSaveTime);­

}­

//获取内容­

function GetContents(contentid) {­

var oEditor = FCKeditorAPI.GetInstance(contentid) ;­

content = oEditor.GetXHTML( true );­

xajax_autosave(content);­

}­

//设置编辑器内容­

function SetContents(content)­

{­

// Get the editor instance that we want to interact with.­

var oEditor = FCKeditorAPI.GetInstance('content') ;­

// Set the editor contents (replace the actual one).­

oEditor.SetHTML( content ) ;­

}­

//-->­

</script>­

</form>­

<div>­

</div>­

<input name="load"  value="载入自动保存内容" />­

<input  value="手动保存" />­

</body>­

</html>

­

附件­

xajax2fckeditor.part1.rar (146.48 KB) ­

­

xajax2fckeditor.part2.rar (121.1 KB) ­

赞(0) 打赏
未经允许不得转载:licqi IT技术 » xajax为fckeditor添加自动保存功能
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏