当前位置: 代码迷 >> Web前端 >> FCKeditor2.6.4图片下传,中文名乱码,红叉各种有关问题解决(下)
  详细解决方案

FCKeditor2.6.4图片下传,中文名乱码,红叉各种有关问题解决(下)

热度:400   发布时间:2012-10-08 19:54:56.0
FCKeditor2.6.4图片上传,中文名乱码,红叉各种问题解决(上)
fckeditor2.6.4总结(上)
2009年04月22日 星期三 13:37
2009-4-21 最新版

在unionshop项目中初识fckeditor,总算有时间可以总结一下它的配置与用法。

一   配置

首先在fckeditor的官方网站http://www.fckeditor.net/download下载FCKeditor_2.6.4.zip。解压后为一个fckeditor文件夹。可以直接拷贝到项目里面去,一般放置于WebRoot根目录。


1 jar包

共四个:common-fileupload.jar

common-io.jar

slf4j-api.jar

fckeditor-java-core.jar

jar包一定要全导入项目路径,如果有缺失会有难以解决的问题。例如:common-io.jar的缺失会造成图片上传失败,然而没有任何提示,只是进度条在不停地动。这种情况就很难找到问题根源。


2 web.xml

这个版本比老版本方便许多,在web.xml中少了些难以理解的配置。web.xml中添加的只是对上传的配置。

只需要在web.xml中加入如下代码:

<!-- fckEditor -->

<servlet>

<servlet-name>Connector</servlet-name>

<servlet-class>

net.fckeditor.connector.ConnectorServlet

</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>Connector</servlet-name>

<!-- Do not wrap this line otherwise Glassfish will fail to

load this file -->

<url-pattern>

/fckeditor/editor/filemanager/connectors/*

</url-pattern>

</servlet-mapping>

<!-- fckEditor -->


3 fckeditor.js


默认的配置一般不需要修改。但是最好来确认两点:

路径要与fckeditor文件夹位置匹配:

FCKeditor.BasePath = '/fckeditor/' ;       //放置于工程的WebRoot根目录

要采用php浏览与上传文件:

var _FileBrowserLanguage         = 'php' ;       

var _QuickUploadLanguage         = 'php' ;      


4 fckeditor/editor/filemanager/connectors/php/config.php


由于fckeditor默认的不支持文件上传,因此要在这进行修改配置:

$Config['Enabled'] = true ;     //支持上传

$Config['UserFilesPath'] = '/userfiles/' ;

//上传文件存放路径配置,这里为WebRoot根目录下userfiles文件夹


5 fckeditor.properties


新建fckeditor.properties放置于WebRoot/WEB-INF/classes根目录下。

添加内容:

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

由于众多的配置信息都在fckeditor-java-core.jar包内的

net.fckeditor.handlers.default.properties中,

需要修改的属性可以再在fckeditor.properties内重新定义。例如上传文件要放置于upload文件夹下,则可以再此处再次定义:

connector.userFilesPath=/userfiles/


6  初步调试


可以通过启动服务器后打开 

http://localhost:8080/projectName/fckeditor/_samples/default.html

来进行简单调试,查看文件是否能正常上传。


二 中文乱码解决

网上找到一篇文章专门解决这个问题,链接为: http://www.javaeye.com/topic/245231

============================================================================================

    本文主要探讨中文乱码的解决方法,在Fckeditor For Java中的中文乱码主要有三个方面:

一、中文图片上传后文件名显示为乱码的情况

二、创建目录时中文为乱码的情况

三、当引用的图片为中文时,在页面中显示为红叉的情况

       这种乱码情况,就我目前的感觉而言是Fckeditor的Bug,不是我们有没有配置正确的问题了,要想解决以上三个问题,需要我们修改Fckeditor的源码。

对于问题1和2我们可以把它用一个方法解决掉,使用UUID(此类位于java.util.UUID,不明白的可以查API)解决掉此问题。思路是把这些上传上来的中文名字进行随机重命名英文字符串,这样就不存在中文问题了。

由于我们无法直接修改FckEditor,所以需要我们重写ConnectorServlet这个Servlet文件,我们在我们的项目里面新建一个Class文件,命名为ConnectorServlet,直接把net.fckeditor.connector.ConnectorServlet的内容copy过来。另外需要修改web.xml文件把servlet的指向定位到我们自己重写的Servlet

假如我们把我们新建的ConnectorServlet放在包test.fckeditor下面,则WEB.XML需要把:

<servlet-class>
    net.fckeditor.connector.ConnectorServlet
</servlet-class>

改成

<servlet-class>
     test.fckeditor.ConnectorServlet
    </servlet-class>

其他保持不变就即可!

在我们copy后会出现一个报错,说是Messages这个找不到,我们使用Eclipse的修复功能导入net.fckeditor.connector.Messages这个包就可以了。

下面我们开始修改这个Servlet,解决我们上述的三个中文乱码问题。

第一个问题:找到doPost方法中的try...catch语句块。在try前面增加这么一行语句:

upload.setHeaderEncoding("UTF-8");

在这里我们对于这个upload进行编码,解决中文问题。到这里对于项目进行重新布署就会发现再上传中文名字的图片就不会显示为乱码了。

第二个问题:找到doGet方法中的

String newFolderStr = UtilsFile.sanitizeFolderName(request
              .getParameter("NewFolderName"));

修改为:

String tempStr = request.getParameter("NewFolderName");
       tempStr = new String(tempStr.getBytes("iso8859-1"),"utf-8");    
       String newFolderStr = UtilsFile.sanitizeFolderName(tempStr);

在原来的代码中没有对rerquest的数据进行重新编码,所以遇到中文就会出现乱码!

第三个问题:其实有两种解决方法,一是修改服务器的URL编码,但是修改服务器的话,在我们自己的电脑上比较方便,如果是我们要放到自己买的空间中就不容易了。另外如果修改了服务器的编码,可能影响到其它项目。所以这种方法就不写了

二是我们使用UUID对上传的文件进行重命名成英文字条串。

找到doPost中的try语句块中的第一个if 即:

if (!ExtensionsHandler.isAllowed(resourceType, extension))
        ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);

在这段代码前面添加下面的一行语句:

filename = UUID.randomUUID().toString()+"."+extension;     //extension为扩展名,在上文中得到的

这样我们的三个问题都解决了。如果我们做了第三步,那第一个修改也就没有什么作用了,所以使用的话,只进行二三步就OK了。

  相关解决方案