FCKeditor 在 Java Web Application 里应用的简单方法

FCKeditor 在 Java Web Application 里应用的简单方法

1.介绍
    FCKeditor 是一个使用广泛,支持多语言的在线HTML编辑器,它支持asp,php,jsp等常见的网络编程语言.它的官方网站是: http://www.fckeditor.net/ 目前最新版本是2.4.3 ,百度空间等大型的网站都有用到FCKeditor

2.下载
    我们今天讨论的是在java环境下的使用.我们要下载两个文件包.一个是FCKeditor的主文件包,还有一个是用来实现JSP tag,和处理文件的上传和浏览的FCKeditor For Jsp 的压缩包.
    下载地址: http://sourceforge.net/project/showfiles.php?group_id=75348
     选择下载: FCKeditor_2.4.3.zip 和 FCKeditor.Java 里的 FCKeditor-2.3.zip
     下载完成后解压.  就像下面的样子:
    

3.拷贝文件
     a.首先把FCKeditor_2.4.3里的fckeditor拷贝到你的网站文件根目录.一般是WebRoot或WebContent下面并把_samples文件夹和一些不要的asp,php 文件删除.网站的目录结构就像下面的这个样子:

     b.把FCKeditor-2.3(也就是FCKeditor For Java 的那个文件夹)下的\web\WEB-INF\lib目录下的FCKeditor-2.3.jar和commons-fileupload.jar拷贝到你网站的WEB-INF/lib下面
    
    拷贝到:


4.配置Servlet
    我们要把处理图片上传的Servlet配置到web.xml里: 我的写法是这样的:

   <!--  FCKeditro 配置  -->
   < 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 >
             < param-value > /UserFiles/ </ param-value >
         </ init-param >
         < init-param >
             < param-name > debug </ param-name >
             < param-value > true </ 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 > 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 >
   <!--  结束FCKeditor配置  -->

    一共有2个servlet.

5.配置Jsp
    要在JSP页面上能显示出来编辑器的话,还要在JSP页面调用FCKeditor,调用的方法可以有很多种,可以用Java代码调用,也可以是纯javascript,asp,JSP Tag.在本例中,我们用JSP Tag调用:
    假设在你的页面表单中新闻内容字段名为content的话.那JSP的代码如下:
     a.在页面的头部引入Taglib:

<% @ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK"  %>

     b.在页面相应的部分嵌入tag:

             < tr >
                 < td  colspan ="2"  height ="500px;" >
                     < FCK:editor  id ="content"  basePath ="fckeditor/"  height ="500"
                        imageBrowserURL ="../filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
                        linkBrowserURL ="../filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
                        flashBrowserURL ="../filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
                        imageUploadURL ="../filemanager/upload/simpleuploader?Type=Image"
                        linkUploadURL ="../filemanager/upload/simpleuploader?Type=File"
                        flashUploadURL ="../filemanager/upload/simpleuploader?Type=Flash" >
                         <% =  U.f(doc.getContent())  %>
                     </ FCK:editor >
                 </ td >
             </ tr >

    那个  <% =  U.f(doc.getContent())  %> 是用来设置初始值的.您可以换成你的代码.

6.完成 
    如果您的完全按照我的这样的方法陪置,那你现在就可以正常的用它了.要是不是的话,就是路径不对导致的问题,那你要自己调一下了.也就是说servlet里的url-pattern和FCK标签里的那些URL要调一下.如果是用默认的话,其它地方就不用调,如果你要个性化,那调的地方就多了.呵呵.自己倒腾吧.
    Servlet 加载成功的话,tomcat启动时会打印如下信息:
    

----  SimpleUploaderServlet initialization started  ----

php | php3 | php5 | phtml | asp | aspx | ascx | jsp | cfm | cfc | pl | bat | exe | dll | reg | cgi
0   -  php
1   -  php3
2   -  php5
3   -  phtml
4   -  asp
5   -  aspx
6   -  ascx
7   -  jsp
8   -  cfm
9   -  cfc
10   -  pl
11   -  bat
12   -  exe
13   -  dll
14   -  reg
15   -  cgi
jpg | gif | jpeg | png | bmp
0   -  jpg
1   -  gif
2   -  jpeg
3   -  png
4   -  bmp

swf | fla
0   -  swf
1   -  fla

----  SimpleUploaderServlet initialization completed  ----

    下面是成功的图片,可以上传图片.

 
第一次这么认真的写BLOG,希望能帮到一些朋友,呵呵,有什么问题也可以留言.我们一起讨论.