FckEditor在java（jsp）中的应用

一、准备

       下载FCKeditor的最新版本2.6RC（这个是核心）FCKeditor_2.6.zip，若在Java环境中使用，还需要下载FCKeditor for java的工具包FCKeditor.Java 2.4（这里面提供了标签库和图片上传的jar）FCKeditor-2.4.zip 。

二、配置

   1. 新建工程compass，在WebRoot文件夹下新建文件夹FCKeditor（用来存放FCKeditor相关文件）
   2. 将FCKeditor_2.6包中的 edit 文件夹和fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 这四个文件放到项目中的 FCKeditor 目录。
   3. 将FCKeditor-Java-2.4.zip 包中的 \web\WEB-INF\lib 下的两个 jar 文件到项目的 WebRoot\WEB-INF\lib 目录
   4. 将FCKeditor-Java-2.4.zip 包中的 \src 下的 FCKeditor.tld 文件到项目的 WebRoot\WEB-INF 目录
   5. 在 WebRoot 目录下新建 UserFiles 文件夹，在此文件夹下新建 Image 和 Flash 两个文件夹
   6. 修改 web.xml 文件，加入以下内容

      <servlet>
        <servlet-name>Connector</servlet-name>
        <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
        <init-param>
         <param-name>baseDir</param-name>
         <!-- 此为文件浏览路径 -->
         <param-value>/UserFiles/</param-value>
        </init-param>
        <init-param>
         <param-name>debug</param-name>
         <param-value>true</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
       </servlet>

       <servlet>
        <servlet-name>SimpleUploader</servlet-name>
        <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
        <init-param>
         <param-name>baseDir</param-name>
         <!-- 此为文件上传路径，需要在WebRoot 目录下新建 UserFiles 文件夹 -->
         <!-- 根据文件的类型还需要新建相关的文件夹 Image、Flash -->
         <param-value>/UserFiles/</param-value>
        </init-param>
        <init-param>
         <param-name>debug</param-name>
         <param-value>true</param-value>
        </init-param>
        <init-param>
         <!-- 此参数为是否开启上传功能，默认的是false改为true -->
         <param-name>enabled</param-name>
         <param-value>true</param-value>
        </init-param>
        <init-param>
         <param-name>AllowedExtensionsFile</param-name>
         <param-value></param-value>
        </init-param>
        <init-param>
         <!-- 此参数为文件过滤，以下的文件类型都不可以上传 -->
         <param-name>DeniedExtensionsFile</param-name>
         <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
        </init-param>
        <init-param>
         <param-name>AllowedExtensionsImage</param-name>
         <param-value>jpg|gif|jpeg|png|bmp</param-value>
        </init-param>
        <init-param>
         <param-name>DeniedExtensionsImage</param-name>
         <param-value></param-value>
        </init-param>
        <init-param>
         <param-name>AllowedExtensionsFlash</param-name>
         <param-value>swf|fla</param-value>
        </init-param>
        <init-param>
         <param-name>DeniedExtensionsFlash</param-name>
         <param-value></param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
       </servlet>   

                                                                                                                                                                             
       <!-- 这里要注意路径问题，不能按拷贝过来的配置，我就是在这里出错搞了很久 -->

       <servlet-mapping>
          <servlet-name>Connector</servlet-name>
          <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
        </servlet-mapping>
       
        <servlet-mapping>
          <servlet-name>SimpleUploader</servlet-name>
          <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
        </servlet-mapping>

刷新一下工程，有一个文件会出错，不管它是什么错，将错误信息清除
      三、应用
    7.

    新建一个提交页 test.jsp 文件和一个接收页 test1.jsp 文件

    test.jsp 代码如下：

    test1.jsp 代码如下：

    就可以开始测试了，尤其是上传图片、flash功能

    四、优化

    删除 \WebRoot\FCKeditor\editor\filemanager\browser\default\connectors 目录下所有的文件，这些是用来浏览文件的，对于jsp的话是使用了 servlet 来处理，所以这些文件都是多余的

    删除 \WebRoot\FCKeditor\editor\filemanager\upload 目录下所有的文件

    删除 WebRoot\FCKeditor\editor\lang 目录下不需要的语言，如保留中文和英文还有 fcklanguagemanager.js 文件

    删除 \WebRoot\FCKeditor\editor\skins 目录下不需要的皮肤文件，有三种皮肤，可根据需要进行删除

    删除 \WebRoot\FCKeditor\editor\dialog\fck_image 目录下 fck_image_preview.html 文件中的部份文字，这些文字是出现在浏览图片时在预览框中的内容

   

       1. <html>   
       2.   <head>   
       3.     <title>TEST</title>   
       4.   </head>   
       5.      
       6.   <body>   
       7.     <%=request.getParameter("testfck")%>   
       8.   </body>   
       9. </html> 

       
  <%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck" %>   
        <html>   
          <head>   
           <title>Test</title>   
         </head>   
            
         <body>   
           <FORM action="updateMessage.jsp">   
         <fck:editor id="testfck" basePath="/compass/FCKeditor/" 
             height="100%" 
           skinPath="/compass/FCKeditor/editor/skins/default/" 
           toolbarSet="Default" 
           imageBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" 
             linkBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" 
             flashBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" 
            imageUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image" 
            linkUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File" 
             flashUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">   
         </fck:editor>   
         </FORM>   
   </body>   
   </html>

评论

1 楼 feng88724 2009-01-09  

1. 将FCKeditor2.1.1解压缩到项目的根目录下，目录结构为：\项目名\FCKeditor\ ，然后将FCKeditor-2.3.zip（java）压缩包中\web\WEB-INF\lib\目录下的两个jar文件拷到项目的\WEB-INF\lib\目录下。

2. 将FCKeditor-2.3.zip压缩包中\web\WEB-INF\目录下的web.xml文件合并到项目的\WEB-INF\目录下的web.xml文件中。

3. 修改合并后的web.xml文件，将名为SimpleUploader的Servlet的enabled参数值改为true，以允许上传功能，Connector Servlet的baseDir参数值用于设置上传文件存放的位置。

4. 上面两个servlet的映射分别为：/editor/filemanager/browser/default/connectors/jsp/connector和/editor/filemanager/upload/simpleuploader，因为我的FCKeditor是放到\项目名\FCKeditor\目录下，所以需要在两个映射前面加上/FCKeditor，即改为/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector和/FCKeditor/editor/filemanager/upload/simpleuploader。

5. 采用Taglib在jsp中添加如下代码创建在线编辑器：

    在页面的顶部加入〈%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %〉

    在适当的位置加入下面代码

  〈FCK:editor id="infoContent" basePath="/CM/FCKeditor/"
              width="522"
              height="300"
              skinPath="/CM/FCKeditor/editor/skins/silver/"
              defaultLanguage="zh-cn"
              tabSpaces="8"
              toolbarSet="CM"
              imageBrowserURL="/CM/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
              linkBrowserURL="/CM/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
              flashBrowserURL="/CM/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
              imageUploadURL="/CM/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
              linkUploadURL="/CM/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
              flashUploadURL="/CM/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash"〉
              请输入内容
  〈/FCK:editor〉

    注意/CM/，这个表示访问项目的URL为http://127.0.0.1:8080/CM/，如果访问的URL为：http://127.0.0.1:8080/ 的话，只需要将上面的/CM去掉就行，不用修改web.xml文件。

6. 经过上面步骤就可以在jsp中使用FCKeditor了。

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

另外，如果使用WebLogic，需要将FCKeditor-2.3.zip压缩包中src目录下的FCKeditor.tld文件提取出来，比如将其放到WEB-INF/tlds/目录下，然后将jsp页中的taglib语句修改为如下所示，就可以正常使用了：

<%@ taglib uri="/WEB-INF/tlds/FCKeditor.tld" prefix="FCK" %>