Java is always EExcellent: JSP 教學

2011年1月1日星期六

JSP 教學 - fckeditor 介紹

fckeditor 是提供文字編輯的模組，譬如一般在寫部落格文章或是論壇等

以下為他們的官方網站，可以上去學習一下　

http://ckeditor.com/

先來介紹一下如何在 Java Web 的環境中(以Netbeans 為例)使用 fckeditor

首先要下載兩個東西，先進入以下網址，並下載 2.3 版以及主文件 2.4.2

http://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/

下載完畢並解壓縮後先來看看 2.3 的內容，最重要的是目錄底下的

web\WEB-INF\ 這應該很熟西吧，先將這目錄下的 lib 複製到你專案下的 WEB-INF 中

如果在開發時記得將這個 lib 裡面的兩個 JAR 檔一併匯入到目前專案中的 Libraries

就是點開 Netbeans 左側欄並選取 Projects 標籤在找出你的WEB專案應該可以看到一個

Libraries > 點選右鍵 > Add JAR/Folder... 再將那兩個JAR匯入

載來就是 web\WEB-INF\ 目錄下的 web.xml，先將其內容直接複製到你專案的 web.xml

以下是該 web.xml 的原始內容　只有 37 和 42 行有變更過


  FCKeditor Test Application
     
        Connector
        com.fredck.FCKeditor.connector.ConnectorServlet
        
            baseDir/UserFiles/
        
            debugtrue
        1
    
    
        SimpleUploader
        com.fredck.FCKeditor.uploader.SimpleUploaderServlet
        
            baseDir/UserFiles/
        
            debugtrue
        
            enabledfalse
        
            AllowedExtensionsFile
        
            DeniedExtensionsFilephp|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi
        
            AllowedExtensionsImagejpg|gif|jpeg|png|bmp
        
            DeniedExtensionsImage
        
            AllowedExtensionsFlashswf|fla
        
            DeniedExtensionsFlash
        1
    
    
        Connector
        /fckeditor/editor/filemanager/browser/default/connectors/jsp/connector
    

    
        SimpleUploader
        /fckeditor/editor/filemanager/upload/simpleuploader

以上程式的第 8 行 <param-value>/UserFiles/</param-value>

/UserFiles/ 可以更動，如果不修改的話並沒關係

代表的是如果使用者上傳資料的話，即會上傳到UserFiles/底下(它會幫你自動建立一個)

接下來是 37 和 42 行的值，以 37 行為例

/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector

fckeditor 資料夾就是剛剛下載 2.4.2 並解壓縮後的內容！

所以如果你想換名稱就可以從這邊修改，而我這邊是並沒有更動

最後請記得將　fckeditor 　放到你的專案根目錄下

接下來介紹如何在 JSP 中呈現 fckeditor，其中有幾種方法

這邊僅介紹以 textarea 標籤呈現的方法，畢竟這也是大家最常使用的了

先在 <head></head> 裡寫入一些 javascript

<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
     <script type="text/javascript">
   window.onload=function(){
   var oFCKeditor = new FCKeditor('MyTextarea') ;
   oFCKeditor.BasePath = "fckeditor/";
   oFCKeditor.ReplaceTextarea();
   }
</script>

接著可以在網頁中寫 :
<textarea rows="4" cols="60" name="MyTextarea">this is a value</textarea>

接著如果想要驗證看看在 textarea 所打入的資料可以如下進行簡單的測試

//.....

<body>
   <%
   request.setCharacterEncoding("UTF-8");
   if(request.getParameter("MyTextarea")!= null){
   String str = (String)request.getParameter("MyTextarea");
   out.println(str);
   }
   %>
   <form action="" method="post">
   <textarea rows="4" cols="60" name="MyTextarea"></textarea>
   <input type="submit" value="send" />
   </form>
<body>
//......

以上為對 fckeditor 的介紹，由於我使用的是較舊的版本

所以如果使用 chrome 測試的話會跑步出結果喔~

可以試試新的版本以及另外其他的呈現方式。