Fckeditor 编辑器在 php 中的配置详解四

四、删除上传文件
当完成以上设置后,fckeditor已经能满足我们的日常使用需要,不过我们却又发现一个问题,那就是上传后的文件我们却无法删除,这样会使网站上的垃圾文件(主要是图片)日益增多,那我们是否能够通过对编辑器的修改能较为方便的管理删除无用上传文件呢?我们不难想到fckeditor的浏览文件功能,对该功能进行适当的扩展,对日常所上传的文件进行管理就变得相当简单易行了,那我们赶紧动手吧:
增加该功能我们修改的页面为:
fckeditoreditorfilemanagerbrowserdefaultfrmresourceslist.html

第一步,在页面的body区域增加如下代码:

CODE:<div id=”showFile” style=”float:left; display:none; background-color:#999999″></div>
<iframe id=”iframe_del” name=”iframe_del” width=”0″ height=”0″ scrolling=”no”></iframe>
<div id=”body_content”></div>

说明:第一对的作用是当我们把鼠标移动到所上传的文件上时显示其相关信息;<iframe></iframe>标签的作用是供我们删除上传文件时做动作响应窗口的,即是将我们的删除动作在iframe中运行,目的是实现伪无刷新删除效果;最后一对的作用是显示上传文件及文件夹的列表(2.4较以前版本对标签中内容作了调整,老版该页面以作为存放列表的容器,而新版直接将显示容器在js中生成,为了使文件显示div和iframe两组标签正常使用,故在body标签中加入一对标签,使之能正常使用,在我的尝试中,倘若不这样修改似乎有错,当然不排除我方法不当的原因,呵呵)

第二步,在文件的js代码区中加入:

// add by jayliaoscu @ 2007-04-23 /*{{{{*/
// 显示文件显示层
function showDiv( fileUrl )
{
var name = fileUrl;
//获取文件类型
var suffix = name.substring(name.lastIndexOf(“.”)+1);

var div= document.getElementById(“showFile”);
div.content = “”;
div.style.position = “absolute”;
div.content += “<table width=’256′ border=’0′ cellpadding=’3′ cellspacing=’1′ bgcolor=’#737357′><tbody><tr><td height=’23’ align=’left’ bgcolor=’#C7C78F’><table width=’100%’ height=’100%’ border=’0′ cellpadding=’0′ cellspacing=’0′><tbody><tr><td width=’47%’> <a href=’javascript:’ onClick=’hiddenDiv();’><font color=’#000000′ style=’text-decoration:none;’>关闭</font></a></td><td width=’53%’ align=’right’><a href=’javascript:’ onclick=’delFile(“” + fileUrl + “”);’><font color=’#000000′ style=’text-decoration:none;’>删除</font></a> </td></tr></tbody></table></td></tr>”;

if (suffix==’gif’ || suffix==”jpg” || suffix==”jpeg” || suffix==”bmp” || suffix==”png”)
{
div.content += “<tr><td align=’center’ bgcolor=’#C7C78F’><img src='” + fileUrl + “‘ onload=’if(this.width>250) this.width=250′ style=’margin:3px;’></td></tr>”;
}
else
{
div.content += “<tr><td height=’35’ align=’center’ bgcolor=’#C7C78F’><strong>该类型不能预览</strong></td></tr>”;
}
div.content += “</tbody></table>”;
div.innerHTML = div.content;
div.style.display = “”;
div.style.top = event.y+document.body.scrollTop+10;
div.style.left = event.x+document.body.scrollLeft+30;
}
// 隐藏文件显示层
function hiddenDiv()
{
var div= document.getElementById(“showFile”);
div.style.display =”none”;
}
// 在iframe中删除文件
function delFile( fileUrl )
{
if(!confirm(‘你确定删除该文件?’))
return;
var url = ‘/fckeditor/del_file.php?filePath=’+ fileUrl;
window.open(url, “iframe_del”);
Refresh();
}
///*}}}*/

第三步,修改本页面原有js
修改:

CODE: oListManager.Clear = function()
{
document.body.innerHTML = ” ;
}

为:

CODE: oListManager.Clear = function()
{
hiddenDiv();
document.getElementById(“body_content”).innerHTML = ” ; // body_content为我们在body区域增加的div标签
}

找到:

CODE:var sLink = ‘<a href=”#” onclick=”OpenFile(” + fileUrl.replace( /’/g, ”’) + ”);return false;”>’;

修改为:

CODE:var sLink = ‘<a href=”#” onmouseover=”showDiv(” + fileUrl + ”);” onclick=”OpenFile(” + fileUrl.replace( /’/g, ”’) + ”);return false;”>’ ; // 即是文件信息显示功能

修改:

CODE:  function Refresh()
{
LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
}

为:

CODE: function Refresh()
{
hiddenDiv(); // 所作修改,为了刷新列表时默认隐藏文件显示层
LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
}

修改函数:GetFoldersAndFilesCallBack,找到:

CODE:document.body.innerHTML = oHtml.ToString() ;

修改为:

CODE:document.getElementById(“body_content”).innerHTML = oHtml.ToString() ;

最后,增加一个文件删除页面del_file.php(该文件路径和增加的js函数delFile(fileUrl)中的调用一致),作用为删除文件,给出成功与否的操作提示,参考代码:

<?php
$filePath = “..”.trim($_GET[‘filePath’]);
if ( $filePath )
{
@unlink($filePath);
echo “<script>alert(‘删除成功。’);</script>”;
}
else
{
echo “<script>alert(‘删除错误,可能文件不存在或者已经删除。’);</script>”;
}
?>

至此,我对于fckeditor的修改基本完成,当然这些修改只是对fckeditor修改使用的抛砖引玉,给大家一个参考,希望对初学者有所帮助。后面对编辑器的修改过程比较匆忙,并未修改一步完成一步文档书写,所以,难免有所出错,望见谅,如果你有什么问题和错误发现欢迎联系我互相讨论,共同进步,呵呵。

QQ: 345472466
Email:shangshuai168@yahoo.com.cn

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据