在JSF/JSP中集成FCKEditor 2.6

目前，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插件已经封装得更加简洁，不同于之前的其他版本。标签的使用方式是，

<%@taglib uri="http://java.fckeditor.net" prefix="FCK"%>
<FCK:editor instanceName="EditorDefault" width="755" height="460" basePath="/fckeditor" value="Hello, world">
  <jsp:body>
    <FCK:config SkinPath="skins/office2003/" />
  </jsp:body>
</FCK:editor>

 

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

<script type="text/javascript">    
    function renderMessage() {
        YAHOO.util.Dom.get("EditorDefault").value = YAHOO.util.Dom.get("form:content").value;
    }
</script>

<f:view>
  <h:form id="form">
    <h:inputTextarea id="content" value="#{mainMessageEditBean.message.messageContent}" style="display:none"></h:inputTextarea>
  </h:form>
</f:view>

 

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

    public Map getParamMap() {
        return getFacesContext().getExternalContext().getRequestParameterMap();
    }
    
    public String getParamAsString(String paramName) {
        Object obj = getParamMap().get(paramName);
        if (obj != null) {
            return obj.toString();
        } else {
            return "";
        }
    }

    public String saveMessage() {
        if (message == null) {
            setErrMsg("Message does not exist.");
            return null;            
        }
        String content = getParamAsString("EditorDefault");
        if (content == null || content.length() == 0) {
            setErrMsg("Message must not be empty.");
            return null;                        
        }
    }

 

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

<servlet>
  <servlet-name>Connector</servlet-name>
    <servlet-class>
         net.fckeditor.connector.ConnectorServlet
    </servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>
         /fckeditor/editor/filemanager/connectors/*
    </url-pattern>
</servlet-mapping>

 

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

 

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

 

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

 

 

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

package com.tail.utils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import net.fckeditor.requestcycle.UserAction;

import com.tail.beans.Principal;
import com.tail.objects.User;

public class UserActionImpl implements UserAction {

    public boolean isEnabledForFileBrowsing(HttpServletRequest req) {        
        return true;
    }

    public boolean isEnabledForFileUpload(HttpServletRequest req) {
        HttpSession session = req.getSession();
        Principal principal = (Principal) session.getAttribute(ConstantUtil.SESSION_PRINCIPAL);
        if (principal != null) {  
            User user = principal.getUser();
            if (user.isUploadable()) {
                return true;
            }
        }
        return false;
    }

}

 

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

connector.userActionImpl=com.tail.utils.UserActionImpl

 

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

 

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

 

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

 

 

2
顶

4
踩

分享到：

Java GUI 历史之争 | 使用Selenium/Ant做Web应用远程自动化测试

• 2008-05-28 13:03
• 浏览 8635
• 评论(10)
• 查看更多

评论

10 楼 cg20061563 2009-03-09  

# public Map getParamMap() { 
#     return getFacesContext().getExternalContext().getRequestParameterMap(); 
# }  这个在Java里面显示是错误的信息。

9 楼 fralepg 2009-02-25  

8 楼 tailsherry 2008-10-07  

pengjj2 写道

而且我用connector.userActionImpl=com.tail.utils.UserActionImpl 上传图片报203错误，上传文件就说我权限不够，我晕

一般都是这个错误了，是因为要修改一下2.4Beta1版的JAR包，其中的源代码还存在问题。其实你自己调试一下就知道了

7 楼 pengjj2 2008-10-02  

而且我用connector.userActionImpl=com.tail.utils.UserActionImpl
上传图片报203错误，上传文件就说我权限不够，我晕

6 楼 pengjj2 2008-10-02  

2.4demol也无法上传啊

5 楼 tailsherry 2008-07-18  

这样可能要修改FCKEditor的源码了，目前FCKEditor的编辑框好像也不支持本地文件显示编辑吧？

一般的都是采用先上传图片，然后加入图片链接的做法。

4 楼 teateattt 2008-07-14  

我也在JSF中使用，想请教，怎么才能让FCKEditor支持粘贴时自动上传图片？
icersoft_at_qq.com

3 楼 tailsherry 2008-06-02  

详细的文档我相信还没有出来，不过你可以下载里面的Samples目录，看看里面的例子就可以了。其实很简单的

2 楼 blackeye&hair 2008-05-29  

1 楼 rockjava 2008-05-29  

不错，我正想试试2.4Beta1呢，不过没配置对，能否给个关于2.4Beta1配置的详细文档？