Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1676170
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-31 09:34:28


在JSF/JSP中集成FCKEditor

关键字: jsf, fckeditor, 文件上传

目前,FCKEditor () 是开源社区一款强大的HTML编辑器,目前最新版本是2.6,支持Java的插件版本是2.4Beta1。

 

对于一般的Java Web应用,我们可以通过直接插入JavaScript代码来构造页面,这种方式操作起来比较简便,也是通用在所有web页面的一种方式。但是,在实际的 Java Web应用中,我们除了用到普通的页面编辑功能之外,难免会考虑到页面上传图片、附件等功能。所以,单纯使用JavaScript方式的话,这一大堆的文 件上传代码将由你自己来写了,工程量还是比较浩大的。自然而然,我们会想到Jsp Tag,有没有现成的快餐式的页面标签呢?答案是肯定的,就如我上文提到的Java插件就已经实现了这些功能,并集成了Apache Commons-FileUpload,以此来实现文件服务器上传。

 

2.4版的Java插件已经封装得更加简洁,不同于之前的其他版本。标签的使用方式是,

Xml代码 复制代码
  1. <%@taglib uri="" prefix="FCK"%>  
  2. <FCK:editor instanceName="EditorDefault" width="755" height="460" basePath="/fckeditor" value="Hello, world">  
  3.   <jsp:body>  
  4.     <FCK:config SkinPath="skins/office2003/" />  
  5.   jsp:body>  
  6. FCK:editor>  

 

在JSF应用中,由于页面都是JSF自定义标签,对于其他标签的内容,JSF不会自动将后台Bean中的值绑定到,那么我们还要做做文章,通过一段JavaScript绑定到body_onload()事件中,以此将JSF标签的内容传递给

Html代码 复制代码
  1. <script type="text/javascript">      
  2.     function renderMessage() {  
  3.         YAHOO.util.Dom.get("EditorDefault").value = YAHOO.util.Dom.get("form:content").value;  
  4.     }  
  5. script>  
  6.   
  7. <f:view>  
  8.   <h:form id="form">  
  9.     <h:inputTextarea id="content" value="#{mainMessageEditBean.message.messageContent}" style="display:none">h:inputTextarea>  
  10.   h:form>  
  11. f:view>  

 

保存HTML编辑内容的时候,你只需要通过获得到的HttpServletRequest对象获取页面提交中的Parameter对象,示例代码如下:

Java代码 复制代码
  1. public Map getParamMap() {  
  2.     return getFacesContext().getExternalContext().getRequestParameterMap();  
  3. }  
  4.   
  5. public String getParamAsString(String paramName) {  
  6.     Object obj = getParamMap().get(paramName);  
  7.     if (obj != null) {  
  8.         return obj.toString();  
  9.     } else {  
  10.         return "";  
  11.     }  
  12. }  
  13.   
  14. public String saveMessage() {  
  15.     if (message == null) {  
  16.         setErrMsg("Message does not exist.");  
  17.         return null;              
  18.     }  
  19.     String content = getParamAsString("EditorDefault");  
  20.     if (content == null || content.length() == 0) {  
  21.         setErrMsg("Message must not be empty.");  
  22.         return null;                          
  23.     }  
  24. }  

 

其他方面,我们需要在自己的web.xml中定义FCKEditor相关的Servlet:

Xml代码 复制代码
  1. <servlet>  
  2.   <servlet-name>Connectorservlet-name>  
  3.     <servlet-class>  
  4.          net.fckeditor.connector.ConnectorServlet  
  5.     servlet-class>  
  6.     <load-on-startup>1load-on-startup>  
  7. servlet>  
  8. <servlet-mapping>  
  9.     <servlet-name>Connectorservlet-name>  
  10.     <url-pattern>  
  11.          /fckeditor/editor/filemanager/connectors/*  
  12.     url-pattern>  
  13. servlet-mapping>  

 

这里需要注明的是,/fckeditor这个web根目录下的目录来源于FCKEditor的核心包(Ver 2.6),可以在官方网站上面下载得到。

 

在目录/fckeditor下面有一个重要的文件fckconfig.js,里面可以配置许多FCKEditor在页面上的展示风格,大家可以仔细慢慢研究 :)

 

PS: 考虑到安全问题,建议大家把FCKEditor界面上的Source Code按钮屏蔽掉,防止黑客的恶意脚本的破坏。

 

 

在我的实际应用中,因为要限制上传文件的权限,所以我要用到权限控制。幸好FCKEditor提供了相应的UserAction接口,可以让我自己实现一个类来控制权限。

Java代码 复制代码
  1. package com.tail.utils;  
  2.   
  3. import javax.servlet.http.HttpServletRequest;  
  4. import javax.servlet.http.HttpSession;  
  5.   
  6. import net.fckeditor.requestcycle.UserAction;  
  7.   
  8. import com.tail.beans.Principal;  
  9. import com.tail.objects.User;  
  10.   
  11. public class UserActionImpl implements UserAction {  
  12.   
  13.     public boolean isEnabledForFileBrowsing(HttpServletRequest req) {          
  14.         return true;  
  15.     }  
  16.   
  17.     public boolean isEnabledForFileUpload(HttpServletRequest req) {  
  18.         HttpSession session = req.getSession();  
  19.         Principal principal = (Principal) session.getAttribute(ConstantUtil.SESSION_PRINCIPAL);  
  20.         if (principal != null) {    
  21.             User user = principal.getUser();  
  22.             if (user.isUploadable()) {  
  23.                 return true;  
  24.             }  
  25.         }  
  26.         return false;  
  27.     }  
  28.   
  29. }  

 

如何加载自定义的UserAction类呢?在classes的根目录下,你需要定义一个fckeditor.properties文件:

Js代码 复制代码
  1. connector.userActionImpl=com.tail.utils.UserActionImpl  

 

这样你就可以控制文件上传的权限了。

 

我的2.4Beta1版的JAR包在文件上传上还有一些问题,我已经下载了相应Java Source Code做了修改,一切都运行的比较正常!

 

PS: 下载的Java Project是基于Maven的,如果不懂Maven的同学抓紧温习温习吧!

阅读(2264) | 评论(3) | 转发(0) |
给主人留下些什么吧!~~

chinaunix网友2009-02-17 13:33:52

2.4Beta1版如何修改图片上传的路径呢?

chinaunix网友2009-02-17 13:33:45

2.4Beta1版如何修改图片上传的路径呢?

chinaunix网友2009-02-17 13:33:37

2.4Beta1版如何修改图片上传的路径呢?