2009-09-13 星期日 天气：小雨绵绵
作者：傲世狂少
六、文件上传的配置和使用
参考文档：fckeditor-java-2.5中的文档，（connector_servlet）
文档列出了配置步骤（总共分两步）：
第一步：
在我们的web.xml中配置一个servlet，并且把它映射到指定的url上边。
<web-app version="2.4">
...
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
...
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
...
</web-app>
第二步：
新建一个fckeditor.properties配置文件，并且把它放到classpath路径下边，里边要有如下内容：
connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction
《在eclipse里classpath即就是把fckeditor.properties放到src目录下》
注意：此名称和路径都是固定的。
至此，我们就可以上传图片啦！！！
七、使用文件上传：遇到中文文件名乱码的问题
1、上传文件名为中文的文件时会出现乱码
思路：我们要首先明白是在服务器端保存的是乱码还是在网页中显示的时候是乱码。
首先我们可以进入到发布目录里，查看文件名是否为乱码？
结果：在服务器端的图片中文名字是乱码（因此确定是在服务器端保存时成了乱码）
而不是在显示的时候出现的乱码。
造成乱码原因分析：
在这个过程中，有两个环节可能造成乱码我们要分析一下：
第一个环节：因为文件上传要以post方式提交给服务器，而在提交表单的时候，它是按照当前页面显示的编码对其内容进行编码，
如果说这个编码不支持中文（如iso-8859-1），那么就会产生乱码。
第二个环节：如果发送的编码是对的，而我们在服务器处理的时候没有以正确的编码格式进行解码，这也能造成乱码。
查找原因：
第一个环节：我们可以点击右键属性来查看对应那个页面（注意点击位置要正确，因为一个页面可能是有多个页面组成）
fckeditor/editor/filemanager/browser/default/frmupload.html(源文件)
其中是这样的：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
说明这个环节没有造成乱码。（到此我们只能找服务器端的处理程序---进入第二个环节）
第二个环节：我们要知道它提交到什么地方呢？（就提到了我们在web.xml中配置的那个servlet里边了）
即：net.fckeditor.connector.ConnectorServlet这个servlet里了。
这里我们可以关联上其源代码，进行查看它的doPost方法就可以了。
可以看到：
他在出来请求时没有指定编码格式：
部分源代码：
List<FileItem> items=upload.parseRequest(request);
正确做法是：我们在调用这个方法对request解析之前应该设置一下编码才对。
所以我就把这个文件的代码复制到自己工程的类里边。
例如：我新件一个类： ConnectorServlet放到了com.zxr.fckeditor包下了
这个类就是我们自己的类了，我们可以对其修改：我们要修改的在doPost方法里，解析request之前：
加上一行设置编码的语句：
upload.setHeaderEncoding("UTF-8");//指定成和页面一致的格式
这样再在web.xml里修改配置：
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
改成：
<servlet-class>
com.zxr.fckeditor.ConnectorServlet
</servlet-class>
这样，fckeditor就用我们自己的这个类来进行处理了。
到此：文件名中文乱码问题彻底解决了。其中的思路和分析方法值得发扬。
八、使用文件上传：创建中文目录名时出现乱码问题
利用文件上传我们可以点击--->>Create New Folder创建文件夹
创建的文件夹都放到了服务器端的目录里。
思路同上：还是找到服务器端网页源文件：fckeditor/editor/filemanager/browser/default/frmcreatefolder.html(源文件)
网页编码格式为：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
说明这里没有问题。
在看后边，是否是以表单的形式提交的？可以看到如下代码段：
<body>
<table class="fullHeight" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td>
<button type="button" style="WIDTH: 100%" οnclick="CreateFolder();">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td><img height="16" alt="" src="images/Folder.gif" width="16"></td>
<td> </td>
<td nowrap>Create New Folder</td>
</tr>
</table>
</button>
</td>
</tr>
</table>
</body>
可以看出，也不是以表单提交的，但发现有以onclick事件：“οnclick="CreateFolder();”，估计就在这个方法里向服务器发送了目录文件名
源码如下：
function CreateFolder()
{
var sFolderName ;
while ( true )
{
//它通过显示一个带有输入框的提示对话框，来获取要创建的文件夹的名字
sFolderName = prompt( 'Type the name of the new folder:', '' ) ;
if ( sFolderName == null )
return ;
else if ( sFolderName.length == 0 )
alert( 'Please type the folder name' ) ;
else
break ;
}
oConnector.SendCommand( 'CreateFolder', 'NewFolderName=' + encodeURIComponent( sFolderName) , CreateFolderCallBack ) ;
}
经过一番追究，还是到了我们的servlet里，这回是它的doGet方法里
应该是取文件夹名字时的转码问题：
我们自己的servlet里找到doGet方法中的如下语句代码：
String newFolderStr=UtilsFile.sanitizeFolderName(request.getParameter("NewFolderName"));
这行代码取出文件夹的名字，没有对中文进行处理而造成的乱码结果，因此我们可以对其进行处理：
修改此行代码为：
对于通过get方式传递的中文参数我们一般如下处理：
String folderStr = request.getParameter("NewFolderName");
folderStr = new String(folderStr.getBytes("ISO-8859-1"),"UTF-8");
String newFolderStr=UtilsFile.sanitizeFolderName(folderStr);
这样我么就解决了上传文件名为中文的文件夹名称乱码的问题啦！！！！
九、使用文件上传：引用中文名的图片不能正常显示问题？
现象：引用中文名的图片时，显示X，（即不能正常显示）
第一种解决办法（不宜使用）：
需要修改Tomcat连接器的配置：因为连接器默认的是以ISO-8859-1解码的。
修改URIEnoding的方法：
停掉tomcat服务器 ，进入D:/Program Files/Apache Software Foundation/Tomcat 6.0/conf下
即tomcat的安装位置
找到server.xml配置文件，打开
因为我用的是8080端口，所以就找到这段配置：
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443"
<!-- 加入编码设置 -->
URIEncoding="UTF-8"
/>
保存，重新启动tomcat服务器，就可以正常显示了。
建议：此方法最好不要使用，因为它可能会对使用get方法传递的中文参数产生影响，造成乱码。
第二种解决办法：
避免出现引用中文名字图片的情况。
我们可以在它保存文件的时候，让其保存成非中文名称。
在我们的servlet中doPost方法中找到保存文件的代码段：
FileItem uplFile = items.get(0);
String rawName = UtilsFile.sanitizeFileName(uplFile.getName());
String filename=FilenameUtils.getName(rawName);
String baseName=FilenameUtils.removeExtension(filename);
//它的扩展名
String extension=FilenameUtils.getExtension(filename);
//在这里我们可以把它的文件名改了（即把名字给换掉，换成一个包含中文的字符串，我们可以使用UUID）
//这样我在它真正保存文件名之前，把名字替换成了UUID。进而达到了避免中文名的问题。
filename=UUID.randomUUID().toString()+"."+extension;
.......
建议：推荐使用此种方法来进行处理，而不建议使用第一中方法。
十、控制允许上传的文件类型
为了安全我们可以控制允许上传的文件的类型。
FCKeditor把上传的文件分为四类：
1、File
2、Image
3、Flash
4、Media
参考文档，对连接器（Connector）的配置。
The integration library supports file, flash, image, and media resource types. Replace type name in the property name with "file", "flash", "image", or "media".
Define either an allowed or denied list. If an allowed list is pre-defined overwrite it with an empty list and define your denied list as you wish.
控制上传文件的类型有两种设置的方式：
1、设置允许上传的文件的扩展名的列表
2、设置禁止上传的文件的扩展名的列表
注意：以上两种方式只能二选一，不能同时使用。他的默认是第一种方式。
设置允许上传的文件类型
文件分类 客户端验证配置（fckconfig.js） 服务器端验证配置（fckeditor.properties）
File FCKConfig.LinkUploadAllowedExtesions connector.resourceType.file.extensions.allowed
Image FCKConfig.ImageUploadAllowedExtensions connector.resourceType.image.extensions.allowed
Flash FCKConfig.FlashUploadAllowedExtensions connector.resourceType.flash.extensions.allowed
Media 无对应配置 connector.resourceType.media.extensions.allowed
注意事项：修改时要注意客户端的配置要和服务器端的配置一致。
我们可以找到fckeditor-java-core-2.5.jar下的net.fckeditor.handlers下的默认配置文件default.properties，拷贝其中要修改的项即可
粘贴到我们的fckeditor.properties文件中，我们要覆盖它的默认配置。
举个小例子：例如我们可以加入一个扩展名为zxr的图片（Image）文件
做法：
在fckeditor.properties文件中加入：
connector.resourceType.image.extensions.allowed = bmp|jpg|gif|png|jpeg|zxr
这是我们修改了服务器端的配置文件，我们还要修改客户端的配置文件（即我们指定的配置文件myfckconfig.js）
我们还得去fckconfig.js（主配置文件）中去中找相应的项（即要被指定配置文件覆盖的项）
即：
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ; // empty for all
将它拷贝到指定配置文件（myfckconfig.js）中。修改为：
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp|zxr)$" ;
重新发布，启动服务器，就可以上传Image，扩展名为zxr的文件了。
这样我们就可以控制允许上传文件的类型了。
十一、控制允许上传文件的大小
在实际应用中，我们当然要对允许上传的文件大小进行控制，而FCKeditor-java并没有提供相关的设置。
此时，我们就要修改它的代码，以便符合我们的要求。
首先，琢磨一下它的默认处理机制：
上传文件的页面（浏览器客户端） ConnectorServlet(服务器端)
------------ -------------------------------------
| 表单 | ---------------提交-------------> |处理上传的文件 |
| | |(不同的处理结果对应不同的响应信息) |
----------- -------------------------------------
|
|
|
(调用回调函数，并且传递错误码)
------------------ |
|OnUploadCompleted | <----------------------|
| 回调函数 |
------------------
|
|
(对错误码进行处理)
|
|
------------- |
| 打印错误码对 | <---------|
| 应的错误信息 |
------------
了解了它的基本机制后，我们就可以修改它的代码了，要修改两处：
1、在服务器端的servlet中，在保存文件之前先判断一下文件大小，如果超出限制，就传递一个自定义的错误码，并且不再保存文件。
2、修改对应的页面中的回调函数，增加对这个自定义错误码的处理。
打开处理文件上传的servlet（我们在web.xml中配置的那个servlet）,找它的doPost方法-->找到它保存文件的那段代码。
部分代码：
..............
//如果这个文件的扩展名不允许上传
if(!ExtensionsHandler.isAllowed(resourceType, extension)){
ur=new UploadResource(UploadResponse.SC_INVALID_EXTENSION);
}
/*------在这里我们要写一个分支---------*/
//如果文件大小超过限制
else if(uplFile.getSize()>10*1024){
//传递一个自定义错误码（注意要使用一个没有被使用的错误码）
ur=new UploadResponse(204);
}
/* --------- 自加代码------ */
//如果不存在以上情况 ,则保存文件
else｛
File pathToSave = new File(currentDir, filename);
.............
｝
到此我们服务器端修改好了，接着修改客户端，增加对此自定义错误码的处理。
fckeditor/editor/dialog/fck_image目录下有个fck_image.js文件
首先将它的编码改为UTF-8，方便编辑中文。
在此文件中找到回调函数：function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )
里边代码段（可以在这里看那些错误码没使用）：
switch ( errorNumber )
{
case 0 : // No errors
alert( 'Your file has been successfully uploaded' ) ;
break ;
case 1 : // Custom error
alert( customMsg ) ;
return ;
case 101 : // Custom warning
alert( customMsg ) ;
break ;
case 201 :
alert( 'A file with the same name is already available. The uploaded file has been renamed to "' + fileName + '"' ) ;
break ;
case 202 :
alert( 'Invalid file type' ) ;
return ;
case 203 :
alert( "Security error. You probably don't have enough permissions to upload. Please check your server." ) ;
return ;
//加入错误码处理
case 204:
alert("文件大小超出限制");
return ;
case 500 :
alert( 'The connector is disabled' ) ;
break ;
default :
alert( 'Error on file upload. Error number: ' + errorNumber ) ;
return ;
}
此外我们还要修改客户端：fckeditor/editor/filemanager/browser/default/frmupload.html(源文件)
同理也是找到回调函数：function OnUploadCompleted( errorNumber, data )
代码段：
switch ( errorNumber )
{
case 0 :
window.parent.frames['frmResourcesList'].Refresh() ;
break ;
case 1 : // Custom error.
alert( data ) ;
break ;
case 201 :
window.parent.frames['frmResourcesList'].Refresh() ;
alert( 'A file with the same name is already available. The uploaded file has been renamed to "' + data + '"' ) ;
break ;
case 202 :
alert( 'Invalid file' ) ;
break ;
//增加错误码处理
case 204:
alert(' 文件大小超出限制');
break;
default :
alert( 'Error on file upload. Error number: ' + errorNumber ) ;
break ;
}
以上的错误信息默认都是英文的，我们可以直接将其修改成中文，就可以了。
综上：以上的是基于Image上传的大小限制，其他的三类(File, Flash, Media)方法类似。
十二、在表单中使用FCKeditor
一般应用中，我们不会单独使用FCKeditor的。
直接在myfckeditor.jsp中：
<form action="display.jsp" method="post">
<script type="text/javascript">
//新建一个fckeditor的实例，它的名字叫content
var oFCKeditor =new FCKeditor("content");
//设置编辑器的基准路径(必须以"/"结尾)
//（注意默认的"/fckeditor/"中的第一个“/”指的是当前站点，即：http://localhost:8080/fckeditor)
//所以我们必须改一下，在前边加上我们的工程名，例如“/myPro/fckeditor/”）
oFCKeditor.BasePath="/fckeditor/";
//创建并且输出一个编辑器
oFCKeditor.Create();
</script>
<input type="submit">
</form>
然后我们就可以在display.jsp中取出内容
display.jsp：
方法一（jsp代码）：
<%
Stirng content=request.getParameter("content");
%>
方法二（EL表达式）：
${param.content}
注意，我们如果填写的是中文，那么提交后，如果哦显示乱码，就必须指定编码格式:
在display.jsp中加入：
<% request.setCharacterEncoding("UTF-8") %>
此处的“UTF-8”是myfckeditor.jsp中的显示格式：
即在 myfckeditor.jsp中有语句：<meta http-equiv="content-type" content="text/html; charset=UTF-8">
这样我们就搞定啦！！
十三、应用
根据实际应用，综合上边的方法就可以把FCKeditor加入到我们自己的项目中去。
例如我们要将一个textarea替换成FCKeditor：
<td>
<html:textarea property="content" rows="10"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
var myeditor=new FCKeditor("content");
myeditor.BasePath="${pageContext.request.contextPath}/fckeditor/";
myeditor.ReplaceTextarea();
</script>
</td>
这样就把textarea替换成FCKeditor了。
如果要修改样式，那么我们可以把我们自己的样式加进FCKeditor的CSS文件即可。
即找到fckeditor/editor/css下的fck_editorarea.css文件。(假设我们自己的样式文件在Webroot/css/mycss1.css)
为了方便，我们就把我们自己的样式文件给加到这个CSS文件中：
用命令：
@import url(../../../css/mycss1.css);
然后我们可以自定义工具集：
在myfckconfig.js中配置相应的项(假如我们自定义的工具集叫“myToolbar”)。
然后在调用的页面里指定使用这个工具集：myeditor.ToolbarSet="myToolbar";
在自定义配置文件中，我们还可以修改其他的属性。（参看前面的技术）
问题：我们在上传文件时不希望用户有“浏览服务器按钮的功能”，即：去掉页面中的部分功能。
因为用户可以通过浏览服务器可以随意的在服务器端创建文件夹和上传文件。（我们不希望用户这样做，只能把这个浏览服务器按钮给去掉）
在上边点右键--》属性找到对应的源文件。fckeditor/editor/dialog/fck_image.html(源文件)
找到这段代码：
<input id="btnBrowse" οnclick="BrowseServer();"
type="button" value="Browse Server"
fcklang="DlgBtnBrowseServer" />
就是它对应的按钮。它的按钮上显示的是中文，而这里是英文，因为它页面上按钮支持多种语言的，我们目前使用的是简体中文。
所以它显示的是中文。
我们可以查找它的语言文件（使用快捷键：Crtl+Shift+R 然后查找：zh-cn）,就找到了fckeditor/editor/lang/zh-cn.js
打开它，查找“浏览服务器”，就可以找到它的键值（"key"-"value"）对了。
部分代码如下：
.....
// Dialogs
DlgBtnOK : "确定",
DlgBtnCancel : "取消",
DlgBtnClose : "关闭",
DlgBtnBrowseServer : "浏览服务器", //这里的key 就是上边的：fcklang="DlgBtnBrowseServer"
DlgAdvancedTag : "高级",
DlgOpOther : "<其它>",
DlgInfoTab : "信息",
DlgAlertUrl : "请插入 URL",
.....
这样我们就知道是这个按钮了。然后把它注释掉：
<!--
<input id="btnBrowse" οnclick="BrowseServer();"
type="button" value="Browse Server"
fcklang="DlgBtnBrowseServer" />
-->
到此，我们就把浏览服务器这个按钮去掉了。其他的和Image也类同。
具体的应用，我们就具体配置相应的东西，就可以灵活的将FCKeditor应用到自己的项目中啦！！
学习完毕。
致谢：
感谢互联网带给我的最大帮助和思考问题，解决问题的经验。感谢广大java爱好者的热心帮助和支持。在此表示衷心的感谢。。。
1474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
