转：fckeditor改造浏览服务器显示方式

fckeditor上传图片可以选择浏览服务器文件，但是显示的是文件名称列表，不是很直观，经过修改可以改为显示缩略图，效果如下图所示：

修改步骤如下：

1.打开\fckeditor\editor\filemanager\browser\default下的frmresourceslist.html文件。找到oListManager.GetFileRowHtml = function( fileName, fileUrl, fileSize )这个函数中的var sLink变量，将其值改为：

var sLink = '<a href="#" onclick="OpenFile(\'' + ProtectPath( fileUrl ) + '\');return false;"><img src="'+fileUrl+'" width="100px" height="100px" class="huangxu"/>' ;

2.在browser.css中写一些相应的代码更改图片的margin等属性

3.还需要修改frmresourceslist.html中的一些代码，把文件的大小，名称隐藏掉，还要把原来的table布局更改为div布局，这个比较简单，就不写了。

以下为修改过的frmresourceslist.html的所有代码，希望大家在此基础上进行改进

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Resources</title>
<link href="browser.css" type="text/css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">

var oListManager = new Object() ;

oListManager.Clear = function()
{
document.body.innerHTML = '' ;
}

function ProtectPath(path)
{
path = path.replace( /\\/g, '\\\\') ;
path = path.replace( /'/g, '\\\'') ;
return path ;
}

oListManager.GetFolderRowHtml = function( folderName, folderPath )
{
// Build the link to view the folder.
var sLink = '<a href="#" onclick="OpenFolder(\'' + ProtectPath( folderPath ) + '\');return false;">' ;

return '<tr>' +
   '<td width="16">' +
    sLink +
    '<img alt="" src="images/Folder.gif" width="16" height="16" border="0"><\/a>' +
   '<\/td><td nowrap colspan="2"> ' +
    sLink +
    folderName +
    '<\/a>' +
  '<\/td><\/tr>' ;
}

oListManager.GetFileRowHtml = function( fileName, fileUrl, fileSize )
{
// Build the link to view the folder.
//var sLink = '<a href="#" onclick="OpenFile(\'' + ProtectPath( fileUrl ) + '\');return false;">' ;
var sLink = '<a href="#" onclick="OpenFile(\'' + ProtectPath( fileUrl ) + '\');return false;"><img src="'+fileUrl+'" width="100px" height="100px" class="huangxu"/>' ;

// Get the file icon.
var sIcon = oIcons.GetIcon( fileName ) ;

return sLink +'<\/a>';
}

function OpenFolder( folderPath )
{
// Load the resources list for this folder.
window.parent.frames['frmFolders'].LoadFolders( folderPath ) ;
}

function OpenFile( fileUrl )
{
window.top.opener.SetUrl( fileUrl ) ;
window.top.close() ;
window.top.opener.focus() ;
}

function LoadResources( resourceType, folderPath )
{
oListManager.Clear() ;
oConnector.ResourceType = resourceType ;
oConnector.CurrentFolder = folderPath ;
oConnector.SendCommand( 'GetFoldersAndFiles', null, GetFoldersAndFilesCallBack ) ;
}

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

function GetFoldersAndFilesCallBack( fckXml )
{
if ( oConnector.CheckError( fckXml ) != 0 )
return ;

// Get the current folder path.
var oFolderNode = fckXml.SelectSingleNode( 'Connector/CurrentFolder' ) ;
if ( oFolderNode == null )
{
alert( 'The server didn\'t reply with a proper XML data. Please check your configuration.' ) ;
return ;
}
var sCurrentFolderPath = oFolderNode.attributes.getNamedItem('path').value ;
var sCurrentFolderUrl = oFolderNode.attributes.getNamedItem('url').value ;

// var dTimer = new Date() ;

//var oHtml = new StringBuilder( '<table id="tableFiles" cellspacing="1" cellpadding="0" width="100%" border="1">' ) ;
var oHtml = new StringBuilder( '<div id="tableFiles" width="100%" border="1">' ) ;

// Add the Folders.
var oNodes ;
oNodes = fckXml.SelectNodes( 'Connector/Folders/Folder' ) ;
for ( var i = 0 ; i < oNodes.length ; i++ )
{
var sFolderName = oNodes[i].attributes.getNamedItem('name').value ;
oHtml.Append( oListManager.GetFolderRowHtml( sFolderName, sCurrentFolderPath + sFolderName + "/" ) ) ;
}

// Add the Files.
oNodes = fckXml.SelectNodes( 'Connector/Files/File' ) ;
for ( var j = 0 ; j < oNodes.length ; j++ )
{
  var oNode = oNodes[j] ;
  var sFileName = oNode.attributes.getNamedItem('name').value ;
  var sFileSize = oNode.attributes.getNamedItem('size').value ;

  // Get the optional "url" attribute. If not available, build the url.
  var oFileUrlAtt = oNodes[j].attributes.getNamedItem('url') ;
  var sFileUrl = oFileUrlAtt != null ? oFileUrlAtt.value : encodeURI( sCurrentFolderUrl + sFileName ).replace( /#/g, '%23' ) ;

oHtml.Append( oListManager.GetFileRowHtml( sFileName, sFileUrl, sFileSize ) ) ;
}

oHtml.Append( '<\/div>' ) ;

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

// window.top.document.title = 'Finished processing in ' + ( ( ( new Date() ) - dTimer ) / 1000 ) + ' seconds' ;

}

window.onload = function()
{
window.top.IsLoadedResourcesList = true ;
}
</script>
</head>
<body class="FileArea">
</body>
</html>