在JSF/JSP中集成FCKEditor

目前，FCKEditor (http://www.fckeditor.net/) 是开源社区一款强大的HTML编辑器，目前***版本是2.6，支持Java的插件版本是2.4Beta1。

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

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

1. <%@taglib uri="http://java.fckeditor.net" 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 标签的内容传递给。

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. <f:view>      
7.   <h:form id="form">      
8.     <h:inputTextarea id="content" value="#{mainMessageEditBean.                                             message.messageContent}"  style="display:none">h:inputTextarea>      
9.   h:form>      
10. f:view>  

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

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

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

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接口，可以让我自己实现一个类来控制权限。

1.  <em style="font-style: italic;">package com.tail.utils;           
2.  import javax.servlet.http.HttpServletRequest;      
3.  import javax.servlet.http.HttpSession;          
4.  import net.fckeditor.requestcycle.UserAction;             
5.  import com.tail.beans.Principal;      
6.  import com.tail.objects.User;            
7.  public class UserActionImpl implements UserAction {        
8.      public boolean isEnabledForFileBrowsing(HttpServletRequest req) {              
9.          return true;      
10.      }          
11.      public boolean isEnabledForFileUpload(HttpServletRequest req) {      
12.          HttpSession session = req.getSession();      
13.          Principal principal = (Principal) session.getAttribute(ConstantUtil.SESSION_PRINCIPAL);      
14.          if (principal != null) {        
15.              User user = principal.getUser();      
16.              if (user.isUploadable()) {      
17.                  return true;      
18.              }      
19.          }      
20.          return false;      
21.      }           
22.  }  em>   

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

1.  <em style="font-style: italic;">connector.userActionImpl=com.                                                                             tail.utils.UserActionImpl  em>   

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

【编辑推荐】

1. JSF的工作方式
2. Acegi安全系统与JSF结合
3. JavaServer Faces(JSF)简介
4. 在JSF中的页面导航问题
5. 介绍JSF框架中使用的设计模式