给Fckeditor 2.6增加图片预览功能[转]

最新推荐文章于 2024-08-29 15:41:03 发布

转载最新推荐文章于 2024-08-29 15:41:03 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yssoft/archive/2009/11/21/1607537.html

本文介绍如何为FCKeditor的文件管理器添加图片预览功能，通过修改默认的资源列表HTML文件实现鼠标悬停时显示图片预览。

2009-11-03 16:22Fckeditor 各版本（包括最新的 2.6版）的文件浏览功能始终不够强大，如不能自定义文件列表样式，不能缩略图显示等等，下面介绍下如何针对图片类型的文件添加鼠标指向时图片预览功能：

打开editor/filemanager/browser/default/frmresourceslist.html文件

1、查找：

return '<tr>' +
     '<td width="16">' +
      sLink +
      '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' +
     '<\/td><td> ' +
      sLink +
      fileName +
      '<\/a>' +
     '<\/td><td align="right" nowrap> ' +
      fileSize +
      ' KB' +
    '<\/td><\/tr>' ;

替换为：

if ("|jpg|gif|bmp|png|jpeg|".indexOf("|"+fileName.substr( fileName.lastIndexOf('.') + 1 ).toLowerCase()+"|")>-1)
{
   return '<tr>' +
     '<td width="16">' +
      sLink +
      '<img alt="" src="' + ProtectPath( fileUrl ) + '" width="24" height="24" border="0" onmouseover="previewImgShow(this,\'' + ProtectPath(fileUrl ) + '\')"><\/a>' +
     '<\/td><td> ' +
      sLink +
      fileName +
      '<\/a>' +
     '<\/td><td align="right" nowrap> ' +
      fileSize +
      ' KB' +
    '<\/td><\/tr>' ;
}else{
   return '<tr>' +
     '<td width="16">' +
      sLink +
      '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' +
     '<\/td><td> ' +
      sLink +
      fileName +
      '<\/a>' +
     '<\/td><td align="right" nowrap> ' +
      fileSize +
      ' KB' +
    '<\/td><\/tr>' ;
}

2、然后增加下列函数：
//鼠标指向预览图片
function previewImgShow(obj,src){
if(!obj)return;
var floatObj=document.getElementById("floatPreviewImg");
   floatObj.innerHTML="<img src='"+src+"' width='260' height='200' />";
   floatObj.style.left=getOffsetLeft(obj)+"px";
   floatObj.style.top=getOffsetTop(obj)+"px";
   floatObj.style.display="";
}

//取对象绝对top值，兼容IE、FF(有细微差别)
function getOffsetTop(obj) {
var n = obj.offsetTop;
while (obj = obj.offsetParent) n+= obj.offsetTop;
return n;
}
//取对象绝对left值，兼容IE、FF
function getOffsetLeft(obj) {
var n = obj.offsetLeft;
while (obj = obj.offsetParent) n+= obj.offsetLeft;
return n;
}
//

3、在 oHtml.Append( '<\/table>' ) ;这行后添加一行：
oHtml.Append('<div id="floatPreviewImg" style="position:absolute;display:none;" onmouseout="this.style.display=\'none\'"></div>');

完成，以后浏览文件列表时，只要是图像类型的文件，会自动生成缩略图标，当鼠标指向图标时会放大图片。

转载于:https://www.cnblogs.com/yssoft/archive/2009/11/21/1607537.html