转:fckeditor改造浏览服务器显示方式
2010-07-05 17:54
176 查看
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">
<!--
* FCKeditor - The text editor for Internet - http://www.fckeditor.net
* Copyright (C) 2003-2009 Frederico Caldeira Knabben
*
* == BEGIN LICENSE ==
*
* Licensed under the terms of any of the following licenses at your
* choice:
*
* - GNU General Public License Version 2 or later (the "GPL")
* http://www.gnu.org/licenses/gpl.html
*
* - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
* http://www.gnu.org/licenses/lgpl.html
*
* - Mozilla Public License Version 1.1 or later (the "MPL")
* http://www.mozilla.org/MPL/MPL-1.1.html
*
* == END LICENSE ==
*
* This page shows all resources available in a folder in the File Browser.
-->
<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>
修改步骤如下:
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">
<!--
* FCKeditor - The text editor for Internet - http://www.fckeditor.net
* Copyright (C) 2003-2009 Frederico Caldeira Knabben
*
* == BEGIN LICENSE ==
*
* Licensed under the terms of any of the following licenses at your
* choice:
*
* - GNU General Public License Version 2 or later (the "GPL")
* http://www.gnu.org/licenses/gpl.html
*
* - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
* http://www.gnu.org/licenses/lgpl.html
*
* - Mozilla Public License Version 1.1 or later (the "MPL")
* http://www.mozilla.org/MPL/MPL-1.1.html
*
* == END LICENSE ==
*
* This page shows all resources available in a folder in the File Browser.
-->
<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>
相关文章推荐
- fckeditor改变浏览服务器文件的显示效果
- FCKEditor在Apache+tomcat下部署的问题---中文乱码,英文乱码,以及图片上传,浏览服务器等问题
- 定义分数类中<<和>>运算符重载,实现分数的输入输出,改造原程序中对运算结果显示方式,使程序读起来更自然。
- 第九周实验报告 任务2 定义Complex类中的<<和>>运算符的重载,实现输入和输出,改造原程序中对运算结果显示方式,使程序读起来更自然。
- Fckeditor 浏览服务器 出现the server didn't send back a proper XML response问题
- 页面中以弹出框方式显示从服务器获取的参数
- 《第九周任务二》定义Time类中的<<和>>运算符的重载,实现时间输入输出,改造源程序中对运算结果的显示方式,使程序读起来更自然
- 对FckEditor编辑器在MAXTHON浏览器下选择服务器文件对话框显示不正常的改进对FckEditor编辑器在MAXTHON浏览器下选择服务器文件对话框显示不正常的改进
- FCKeditor在本地正常显示,发布到服务器上后不显示了
- 把ASP.NET项目发布到IIS服务器上后,测试显示此问题,无法浏览网站的原因
- fckeditor浏览服务器文件问题
- 对FckEditor编辑器在MAXTHON浏览器下选择服务器文件对话框显示不正常的改进
- 第九周【项目1】在第8周项1的基础上(1)再定义一目运算符 -,-c相当于0-c(2)定义Complex类中的<<和>>运算符的重载,实现输入和输出,改造原程序中对运算结果显示方式,使程序读起来更自然
- 第九周实验报告任务3 定义分数类中<<和>>运算符重载,实现分数的输入输出,改造原程序中对运算结果显示方式,使程序读起来更自然。
- FCKeditor 上传图片和浏览服务器时提示请先登陆的解决办法
- 第九周实验报告任务 1 定义Time类中的<<和>>运算符重载,实现时间的输入输出,改造原程序中对运算结果显示方式,使程序读起来更自然。
- 《第九周任务三》定义分数类中《和》运算符重载,实现分数的输入输出,改造源程序中对运算结果显示方式,使程序读起来更自然
- get方式提交中文到服务器显示乱码问题
- 在VB中两种方式显示文件夹浏览对话框
- [转]ZF与FCKeditor集成完全攻略(包括上传、浏览服务器图像)