Fckeditor 2.6.3增加图片预览功能
打开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>');
