dyerac  
dyerac In Java
公告

日历
<2008年5月>
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567
统计
  • 随笔 - 36
  • 文章 - 10
  • 评论 - 94
  • 引用 - 0

导航

常用链接

留言簿(5)

随笔分类(49)

随笔档案(36)

文章分类(11)

文章档案(10)

相册

dyerac

搜索

  •  

积分与排名

  • 积分 - 77945
  • 排名 - 707

最新随笔

最新评论

阅读排行榜

评论排行榜

 
   FCKeditor,作为现在功能最强大的在线HTML编辑器,网上关于他的功能介绍以及基本配置已经很多了。然而其中不少文章涉及面都比较局限。最近,笔者需要在自己项目中使用到FCKeditor,并用之于和已有的基于JSF的web应用整合。从对FCKeditor一窍不通到成功达成整合,我从网上学到了不少知识,自己也积累了不少经验,因此,也想和大家一起分析这一过程。

   1.基本配置:

      知之为知之,不知google之。关于FCKeditor的基本配置在网上自有高人指点,这里我也不多耽误大家时间。主要是谈下自己当初配置的问题:
    a.基本路径:
        注意FCKeditor的基本路径应该是/(你的web应用名称)/(放置FCKeditor文件的文件夹名)/
        我的目录结构为:
       
        因此,我的基本路径设置为:/fck/FCKeditor/

     b.文件浏览以及上传路径设置:
        我个人的参考如下:
      
FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/jsp/connector' ;
FCKConfig.LinkBrowserWindowWidth    = FCKConfig.ScreenWidth * 0.7 ;        // 70%
FCKConfig.LinkBrowserWindowHeight    = FCKConfig.ScreenHeight * 0.7 ;    // 70%

FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image
&Connector=connectors/jsp/connector';
FCKConfig.ImageBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ;    // 70% ;
FCKConfig.ImageBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ;    // 70% ;

FCKConfig.FlashBrowser = true ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash
&Connector=connectors/jsp/connector' ;
FCKConfig.FlashBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ;    //70% ;
FCKConfig.FlashBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ;    //70% ;

FCKConfig.LinkUpload = true ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.LinkUploadAllowedExtensions    = "" ;            // empty for all
FCKConfig.LinkUploadDeniedExtensions    = ".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$" ;    // empty for no one

FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL =FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;
FCKConfig.ImageUploadAllowedExtensions    = ".(jpg|gif|jpeg|png)$" ;        // empty for all
FCKConfig.ImageUploadDeniedExtensions    = "" ;                            // empty for no one

FCKConfig.FlashUpload = true ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
FCKConfig.FlashUploadAllowedExtensions    = ".(swf|fla)$" ;        // empty for all
FCKConfig.FlashUploadDeniedExtensions    = "" ;                    // empty for no one


2.与JSF整合。

  FCKeditor与JSF整合的最大问题,在于需要从JSF环境中相应Bean读取值赋予给FCKeditor,同时从FCKeditor里面读取结果赋予给相应的数据持有Bean。由于这一过程在传统的JSF标签中是通过值绑定有框架自动完成,因此这里需要我们手动来实现这一过程。
  以下要展示的demo由两部分组成:
   form.jsp显示编辑内容,点击其submit按钮跳转至test.jsp,test.jsp调用FCKeditor对form.jsp中显示的已有内容进行显示和编辑。编辑完后点击submit,页面将重新跳转到form.jsp,显示修改后的内容。
  其实,这就是一个很基本的编辑功能,在论坛和blog中都可以看到它的身影。
   而ContextBean用于持有待编辑的内容,它的scope是session范围。ContextServlet用于读取FCKeditor修改后的内容,并赋予ContextBean中。

    首先来看form.jsp
<body>  
        
<f:view>
            
<h:form>
                
<pre>
                
<h:outputText value="#{td.name}" escape="false"></h:outputText>
                
</pre>
                                
<br/>
                
<h:commandButton value="submit" action="#{td.submit}"></h:commandButton>
            
</h:form>
        
</f:view>
    
</body>

    这个页面很简单,其中td对应的就是ContextBean,ContextBean.name用于保存编辑内容

package com.dyerac;

public class ContextBean {
    
private String name;

    
public String getName() {
        
return name;
    }


    
public void setName(String name) {
        
this.name = name;
    }


    
public String submit() {
        
        
return "edit";
    }

}


下面来看test.jsp
 用过FCKeditor的都知道,FCKeditor可以通过三种方式来调用:
 script, jsp 标签以及java代码。
这里,为了方便从ContextBean中读取name属性内容作为其初始值,我使用了第三种方法
其中FCKeditor fck=new FCKeditor(request,"EditorDefault");初始化FCKeditor,第二个参数即为该FCKeditor实例的id,当提交后FCKeditor内的内容将以该参数为变量名保存在request中。
比如,这里我选择了EditorDefault,所以日后读取FCKeditor内容时,可以通过以下语句:
request.getParameter("EditorDefault")

<body>
        
<form action="/fck/servlet/ContextServlet" method="post" target="_blank">
        
<%FCKeditor fck=new FCKeditor(request,"EditorDefault");
          FacesContext fcg
=FacesContext.getCurrentInstance();
          ContextBean td
=(ContextBean)fcg.getApplication().getVariableResolver().resolveVariable(fcg,"td");
          fck.setBasePath(
"/fck/FCKeditor/");
          fck.setValue(td.getName());
          fck.setHeight(
new Integer(600).toString());
          out.print(fck.create());
         
%>
         
<input type="submit" value="Submit">
    
</body>

 修改后的结果以post方式提交给/fck/servlet/ContextServlet,该url对应的即为ContextServlet。
ContextServlet负责读取FCKeditor里的内容,并赋予给session中的ContextBean。doPost()方法用于实现该功能

public void doPost(HttpServletRequest request, HttpServletResponse response)
            
throws ServletException, IOException {
        FacesContext fcg 
= getFacesContext(request,response);
        ContextBean td 
= (ContextBean) fcg.getApplication()
                .getVariableResolver().resolveVariable(fcg, 
"td");
        String name
=new String(request.getParameter("EditorDefault").getBytes("ISO-8859-1"),"UTF-8");
        td.setName(name);
        RequestDispatcher rd
=getServletContext().getRequestDispatcher("/form.faces");
        rd.forward(request, response);
    }

需要注意两个问题,
其一:FCKeditor内的中文信息读取是可能出现乱码,需要额外的处理:
   String name=new String(request.getParameter("EditorDefault").getBytes("ISO-8859-1"),"UTF-8");
其二:由于servlet处于FacesContext范围外,因此不能通过FacesContext.getCurrentInstance()来得到当前FacesContext,因此ContextServlet定义了自己的方法用于获取FacesContext:

//     You need an inner class to be able to call FacesContext.setCurrentInstance
//     since it's a protected method
    private abstract static class InnerFacesContext extends FacesContext
    
{
      
protected static void setFacesContextAsCurrentInstance(FacesContext facesContext) {
        FacesContext.setCurrentInstance(facesContext);
      }

    }


    
private FacesContext getFacesContext(ServletRequest request, ServletResponse response) {
      
// Try to get it first
      FacesContext facesContext = FacesContext.getCurrentInstance();
      
if (facesContext != nullreturn facesContext;

      FacesContextFactory contextFactory 
= (FacesContextFactory)FactoryFinder.getFactory(FactoryFinder.FACES_CONTEXT_FACTORY);
      LifecycleFactory lifecycleFactory 
= (LifecycleFactory)FactoryFinder.getFactory(FactoryFinder.LIFECYCLE_FACTORY);
      Lifecycle lifecycle 
= lifecycleFactory.getLifecycle(LifecycleFactory.DEFAULT_LIFECYCLE);

      
// Either set a private member servletContext = filterConfig.getServletContext();
      
// in you filter init() method or set it here like this:
      
// ServletContext servletContext = ((HttpServletRequest)request).getSession().getServletContext();
      
// Note that the above line would fail if you are using any other protocol than http
      ServletContext servletContext = ((HttpServletRequest)request).getSession().getServletContext();

      
// Doesn't set this instance as the current instance of FacesContext.getCurrentInstance
      facesContext = contextFactory.getFacesContext(servletContext, request, response, lifecycle);

      
// Set using our inner class
      InnerFacesContext.setFacesContextAsCurrentInstance(facesContext);

      
// set a new viewRoot, otherwise context.getViewRoot returns null
      
//UIViewRoot view = facesContext.getApplication().getViewHandler().createView(facesContext, "yourOwnID");
      
//facesContext.setViewRoot(view);

      
return facesContext;
    }
 

   ContextServlet处理完了FCKeditor内容后,将跳转到form.jsp。
这样一个简单的编辑功能就完成了。

3.遗留问题:

   我在上传文件时还是会出现中文乱码的问题,按照其他人说的那样把网页的charset=utf-8改成gb2312一样会有问题,还请各位高手赐教^_^


另外,关于整个demo的源代码如果大家需要,可以留言给我,我用邮箱发给您。不足之处,还请各位多多指点

posted on 2006-10-04 20:52 dyerac in java... 阅读(3807) 评论(32)  编辑  收藏 所属分类: JavaEE
评论:
  • # re: FCKeditor与JSF的整合  黑蝙蝠 Posted @ 2006-10-04 23:36
    发个给我吧 多谢
    yh10000@sina.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合  dyerac in java... Posted @ 2006-10-05 00:06
    @黑蝙蝠
    发了  回复  更多评论   

  • # re: FCKeditor与JSF的整合  didibabawu Posted @ 2006-10-05 10:43
    也发个给我吧,谢谢!

    raywang2005@gmail.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合  dsd Posted @ 2006-10-06 12:59
    麻烦发一个给我吧,先多谢啦!
    wolfhml2008@163.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合  gg Posted @ 2006-10-08 10:08
    嗯,也给我一份吧,谢谢
    calmdiss@163.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合  af Posted @ 2006-10-08 18:05
    xzhoujun@gmail.com
    thanks!  回复  更多评论   

  • # re: FCKeditor与JSF的整合  Nelson Posted @ 2006-10-09 10:29
    如果你解决了上传文件时的中文名问题,请告知一下:nelson1983@gmail.com
    谢谢!!! ^_^  回复  更多评论   

  • # re: FCKeditor与JSF的整合  狂人思维 Posted @ 2006-10-09 12:42
    佩服楼主的工作态度,由于JSF的模型更新机制的限制,要集成此类的常用东东的确很不容易.

    但相信应该还是有更好更内聚一些的办法来解决该问题,以下是我给您的建议:
    您可以编写一个针对FCKEditor的JSF组件,该组件的value就用来接收FCKEditor的内容值,另提供一个charset属性,用于设计FCKEditor的内容编码.
    接下来为该组件编写render和tag类,renderkit在encodeEnd()时负责调用FCKEditor的相关类生成编辑器HTML以及为其传递编辑器的文字内容;renderkit在decode()时负责将页面form的文本内容域的值绑定到你的JSF组件的value内即可.
    在decode()和encodeEnd()这两个方法中,可以根据您的组件设置的charset进行相应的转换或其它的一些工作...

    这样一来是不是就比楼主现在的方法在简洁性和可重用性上要优越一些呢.  回复  更多评论   

  • # re: FCKeditor与JSF的整合  dyerac in java... Posted @ 2006-10-10 13:44
    @狂人思维
    确实
    我以前也考虑过这个问题的,但是写JSF组件真是一件体力活.....
    说实在的,我对JSF现在十分失望,觉得它没有宣传的那么强大
    您对JSF很有研究吗?
    还望交流交流 ^_^  回复  更多评论   

  • # re: FCKeditor与JSF的整合  RomKK[匿名] Posted @ 2006-12-29 11:53
    给我来一份吧!romkk@163.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合  michael_love911 Posted @ 2007-03-20 12:23
    我也想要,先谢谢了 ^_^

    michael_love911@21cn.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合  蜘蛛 Posted @ 2007-07-09 01:44
    javazhai@gmail.com

    给我一份.兄弟  回复  更多评论   

  • # re: FCKeditor与JSF的整合  sz Posted @ 2007-07-20 21:45
    找了好久,麻烦给我份吧!谢谢1
    sz6554@163.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合  小偉 Posted @ 2007-09-19 17:39
    俺也要一份参考!谢谢

    学习jsf时,被他极其简单的实例所吸引,等到用上工作时,才知道这里在的井有多深啊!!

    同仁兄所整合的在线编辑器正是我近期正要准备实现的,请先行者发一份给予参考,不盛感激。。。

    邮箱:fangbiao21@gmail.com

    希然经过大家的不断学习和努力,让jsf变得不再艰难!  回复  更多评论   

  • # re: FCKeditor与JSF的整合  小偉 Posted @ 2007-10-11 13:42
    其上传图片安全性是个问题  回复  更多评论   

  • # re: FCKeditor与JSF的整合  baisj Posted @ 2007-12-04 18:17
    sxhybsj@yahoo.com.cn
    给我一份.兄弟  回复  更多评论   

  • # re: FCKeditor与JSF的整合  gembin Posted @ 2008-02-26 16:06
    gembin@gmail.com
    强烈需要源码阿,谢谢!!!!!!!!!!!!!!!!!!!!!  回复  更多评论   

  • # re: FCKeditor与JSF的整合  ytwzq Posted @ 2008-03-18 11:24
    也麻烦给我一份源码,谢谢!!!急需啊!!!!ytwzq@163.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合  急了 Posted @ 2008-03-28 10:39
    如果你解决了上传图片出现乱码的问题,麻烦告诉一下
    wd2005b@163.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合  sonnychen Posted @ 2008-05-08 15:53
    也麻烦给我一份源码,谢谢!!!急需啊!!!!sonnychen@stn.com.tw  回复  更多评论   

  • # re: FCKeditor与JSF的整合  Justin Posted @ 2008-05-18 10:18
    楼主,你好,麻烦把demo的源代码发给我一份吧,我的e-mail:future_5188@tom.com,谢谢!

    如果方便的话把你的联系方式也发到邮箱一下,以后我们可以多多交流!  回复  更多评论   

  • # re: FCKeditor与JSF的整合  gembin Posted @ 2008-05-28 23:05
    等到现在还没发给我。。。。。。。。。。。。 :(  回复  更多评论   

  • # re: FCKeditor与JSF的整合  王仕军 Posted @ 2008-07-19 16:27
    我实在没有办法了,把这个demo发给我吧   回复  更多评论   

  • # re: FCKeditor与JSF的整合  王仕军 Posted @ 2008-07-19 16:28
    12403367@163.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合[未登录]  andy Posted @ 2009-07-31 17:21
    建议大家先了解JSP EL用法,这种Java脚本解决方案实在不敢恭维。。。  回复  更多评论   

  • # re: FCKeditor与JSF的整合  jianwenzhang Posted @ 2010-01-14 10:14
    我用了试了很久还是不行,麻烦发给我一个。jianwenzhang@yeah.net  回复  更多评论   

  • # re: FCKeditor与JSF的整合[未登录]  孟雪雪 Posted @ 2011-09-13 11:16
    发给我吧 学习学习 现在做项目也在用jsf 邮箱651463679@qq.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合  jhoncn Posted @ 2012-08-14 15:42
    765386472@qq.com   回复  更多评论   

  • # re: FCKeditor与JSF的整合[未登录]  jerry Posted @ 2012-12-25 17:31
    麻烦发一份给我吧!
    最近在也想整合jsf和ckeditor,网上有个ck-jsf-editor,楼主知道是否可用
    ?  回复  更多评论   

  • # re: FCKeditor与JSF的整合[未登录]  jerry Posted @ 2012-12-25 17:34
    忘了说邮箱了: 195308646@qq.com  回复  更多评论   

  • # re: FCKeditor与JSF的整合[未登录]  小罗 Posted @ 2013-11-29 15:49
    505724767@qq.com
    麻烦你了!  回复  更多评论   

  • # re: FCKeditor与JSF的整合  re Posted @ 2014-05-09 20:02
    776959154@qq.com
    麻烦发一份给我吧!
    麻烦你了!  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 
 
Copyright © dyerac in java... Powered by: 博客园 模板提供:沪江博客