Jsp中使用FCKeditor上傳圖片

FCKeditor功能還真是強大，但它好像對Jsp不大敏感，網上介紹的文章也少。趕上最近要研究用FCKeditor上傳圖片，剛發現了幾篇，加上自己的研究成果，趕快總結一下。

先去下載一個FCKeditor，再下一個FCKeditor.java 2.3 (FCKeditot for java) 這個檔案就是用來讓它支援JSP的，我找了FCKeditor的官網，不過下載地址好像不大好用，建議去http://sourceforge.net/下載。網上說還有一個東西要下，就是xalan.jar，xml.apache.org是它的網站。

現在開始設定，先到tomcat->webapps裡建立一個檔案夾叫mysite。把FCKeditor裡的/editor和fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四個檔案copy到mysite檔案夾裡，因為別的檔案對我們來說沒有什麼意義。再把FCKeditor.java 2.3中的web目錄下的WEB-INF目錄copy到mysite下(裡面有commons-fileupload.jar, FCKeditor-2.3.jar,web.xml等幾個檔案), 把其中的src目錄下的FCKeditor.tld檔案copy到mysite/WEB-INF/下.這樣它才支援JSP。

下面我們要對其中的一些檔案進行修改：
開啟fckconfig.js 檔案，修改 FCKConfig.DefaultLanguage = 'zh-cn' ;

把FCKConfig.LinkBrowserURL等的值替換成以下內容：

FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;

FCKConfig.FlashBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;

FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;

FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;

開啟WEB-INF下面的web.xml檔案：
把SimpleUploader中的配置屬性enabled定義為true(開啟檔案上傳功能)
添加標籤定義:
<taglib>
<taglib-uri>/mysite</taglib-uri>
<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</taglib>

這樣檔案就設定完了,這時建立一個jsp檔案試試： 

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" import="java.util.*" import="java.text.*" errorPage="" %>
<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%@ taglib uri="/mysite" prefix="FCK" %>
<script type="text/javascript" src="/mysite/fckeditor.js"></script>

<form method="POST" action="Bs_Bulletin_save.jsp">
   <table width="100%" border="0" cellspacing="1" cellpadding="2">
   　　<tr>
                  <td width="19%" bgcolor="#F0F0F0" height="25" align="right">標題：</td>
            <td width="81%" bgcolor="#F0F0F0"><INPUT TYPE="text" NAME="title" size="58"></td>
        </tr>
       <tr>
            <td width="19%" height="300" bgcolor="#F0F0F0">
                <div align="center">中文資訊設定<BR><BR>
              <span style="color: #FF0000">支援html（圖片大小寬度不要超過170個象素）</span></div>
           </td>
           <td width="81%" bgcolor="#F0F0F0">
               <textarea name="content" cols="58" rows="15"></textarea>
               <script type="text/javascript">
                          var oFCKeditor = new FCKeditor('content') ;
                          oFCKeditor.BasePath = "/mysite/" ;
                          oFCKeditor.Height = 400;
                          oFCKeditor.ToolbarSet = "Default" ;
                      oFCKeditor.ReplaceTextarea();
               </script>
          </td>
    </tr>

    <tr>
         <td width="19%" height="25" bgcolor="#F0F0F0">發布時間：</td>
         <td width="81%" bgcolor="#F0F0F0"><INPUT TYPE="text" NAME="datatimes" value="<%=time%>" size="58"></td>
    </tr>
    
    <tr>
          <td colspan="2" bgcolor="#F0F0F0">
          <div align="center"><input type="submit" value=" 添　加 "  name="cmdok">&nbsp;<input type="reset" value=" 重 寫 " name="cmdcancel"></div></td>
    </tr>
   </table>
   </form>

 

加紅字的部分，就是調用這個線上編輯器了。現在上傳的圖看一下，提示internal server error 500，還記得一開始時，我們提到的xalan.jar嗎，現在把xalan.jar放到lib檔案夾裡，關掉tomcat再重起一下，應該好用了……

注意，如果想把這個控制項融入你現有的web應用系統中，就不需要建立mysite了，你可以這樣做：

１、把FCKeditor裡的/editor和fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四個檔案直接copy到現有web應用的某個目錄下。

２、把FCKeditor.java 2.3中WEB-INF目錄裡的commons-fileupload.jar, FCKeditor-2.3.jar放在現有系統的lib目錄下。

３、在現有系統的web.xml中加入FCKeditor.java 2.3中web.xml的配置資訊，並添加標籤定義:
       <taglib>
           <taglib-uri>/mysite</taglib-uri>
           <taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
       </taglib>
    這裡別忘了把SimpleUploader中的配置屬性enabled定義為true以開啟檔案上傳功能。

４、然後把FCKeditor.tld檔案copy到現有系統的WEB-INF/下，這樣就可以了。當然，FCKeditor.tld的位置不是絕對的，你可以放在其它地方，只要在前面的標籤定義中指定相應的位置就行了。

附：FCKeditor.java中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>false</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>
   <param-value>/UserFiles/</param-value><!--上傳附件所在根路徑 -->
  </init-param>
  <init-param>
   <param-name>debug</param-name>
   <param-value>false</param-value><!--啟動服務時是否顯示調試資訊 -->
  </init-param>
  <init-param>
   <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>2</load-on-startup>
 </servlet>

 <servlet-mapping>
     <servlet-name>Connector</servlet-name>
     <url-pattern>/webapp/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern><!--FCKeditor所在目錄,即/editor和fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四個檔案所在目錄 -->
 </servlet-mapping>
  
 <servlet-mapping>
     <servlet-name>SimpleUploader</servlet-name>
     <url-pattern>/webapp/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern><!--FCKeditor所在目錄 -->
 </servlet-mapping> 
   
 <taglib>
  <taglib-uri>/home/project/law/FCKeditor</taglib-uri>
&nbs