OK,到此为止,FCK基本集成到您的web系统当中。但是目前出现了几个问题。
1. 上传文件是中文名称的会出现异常
2. 建立中文文件夹会出现异常
3. 图片默认是文件夹存储方式,读取图片也是文件路径形式,如果项目需求只能采用二进制流存储(比如说运行环境是云计算环境),则不得不去修改源码。
好的,基于以上问题我们刚刚下载的源代码就有用处了,我们不得不去修改它的源代码来满足我们的要求,呵呵,尤其是第三条,没办法,运行时环境所致……
修改源代码
1. 修改核心servlet
打开net.fckeditor.connector.ConnectorServlet,修改以下内容
在151行修改如下
newFolderStr = new String(newFolderStr.getBytes("iso8859-1"),"utf-8"); logger.debug("Parameter NewFolderName: {}", newFolderStr); |
在242行的位置修改如下
ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("UTF-8"); |
这样在servlet中修改后的代码至少不会中文乱码了。
2. 修改web服务器的编码格式为UTF-8格式,所以如果您的web项目放到自己可以操作的linux下当然可以控制自己的服务器编码了,但如果您是放在ISP服务商提供的虚拟空间中,之前一定要确定他们的web服务器编码格式是UTF-8的,否则不支持中文文件上传的。
3. 下面我们解决存储流图片的问题,有时候项目需求需要将所有的文件以数据库二进制流形式进行存储,这样做的好坏笔者不想过多评论,根据实际情况来选择吧,比这只是给出修改代码解决。
还是先修改刚刚那个核心的servlet类
net.fckeditor.connector.ConnectorServlet
在代码的289行的uplFile.write(pathToSave);下面加上存二进制文件的代码
示例代码如下
//存图片对象 FCKImage fckImage = new FCKImage();
//存储图片流 InputStream inputStream = uplFile.getInputStream();
fckImage.setId(filename); fckImage.setPictureContent(inputStream); fckImage.setSize(uplFile.getSize());
FCKImageDAO fckImageDAO = new FCKImageDAO(); fckImageDAO.save(fckImage); |
笔者这里建立了一个FCKImage实体,它的pictureContent是InputStream,用于存储图片。至于DAO代码嘛,网上很多代码,在此不再赘述。
之后还得修改一个类文件net.fckeditor.response. XmlResponse
这个类只要是对页面的AJAX调用后的反馈类,此时只需要修改它的setFiles()方法即可。
修改后的方法如下
/** * Lists all files in the given dir as XML tags. * 文件,应该从数据库中读取图片文件 * @param dir */ public void setFiles(File dir) {
if (filesElement != null) { Element parent = (Element) filesElement.getParentNode(); parent.removeChild(filesElement); }
filesElement = document.createElement("Files"); document.getDocumentElement().appendChild(filesElement);
FCKImageDAO fckImageDAO = new FCKImageDAO();
List<FCKImage> list = fckImageDAO.findAll();
for(FCKImage fckImage : list){
Element fileElement = document.createElement("File"); fileElement.setAttribute("name", fckImage.getId()); fileElement.setAttribute("size", "未知");
long length = 0; if (fckImage.getSize() < 1024) length = 1L; else length = fckImage.getSize()/1024; fileElement.setAttribute("size", String.valueOf(length));
filesElement.appendChild(fileElement); }
} |
别忙,还有2个页面文件没有修改呢,
一个是/fckeditor/editor/dialog/fck_image/fck_image.js的OnUploadCompleted函数,修改如下:
function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg ) { // Remove animation window.parent.Throbber.Hide() ; GetE( 'divUpload' ).style.display = '' ;
switch ( errorNumber ) { case 0 : // No errors alert( '文件已经上传成功' ) ; break ; case 1 : // Custom error alert( customMsg ) ; return ; case 101 : // Custom warning alert( customMsg ) ; break ; case 201 : alert( '文件名已经存在,您上传的文件需要重新命名为 "' + fileName + '"' ) ; break ; case 202 : alert( '无效的文件类型' ) ; return ; case 203 : alert( "安全错误!您可能没有足够的权限来上传,请检查您的服务器。" ) ; return ; case 500 : alert( '连接不可用' ) ; break ; default : alert( '上传错误,代码: ' + errorNumber ) ; return ; }
var fileUrlArray = fileUrl.split("/");//全部分割
/** * 指向显示流图片的jsp页面 */ var showIOurl = "/showImage.jsp?fileId="+fileUrlArray[fileUrlArray.length-1];
sActualBrowser = '' ; SetUrl( showIOurl ) ; GetE('frmUpload').reset() ; } |
showImage.jsp页面是输出流图片的逻辑页面,稍后奉上源代码。
另一个就是
/fckeditor/editor/filemanager/browser/default/frmresourceslist.html的OpenFile函数。
修改如下:
function OpenFile( fileUrl ) { //连接到显示流文件的jsp var showIOurl = "/showImage.jsp?fileId="+fileUrl; window.top.opener.SetUrl( showIOurl ) ; window.top.close() ; window.top.opener.focus() ; } |
可以看到,他们都调用了一个jsp页面,用于输出流文件的。
showImage.jsp代码如下: