JSF and FCKeditor integration

Posted under Article Development Java on Tuesday, 14 July 2009 by rueben

FCKeditor, as is now the most powerful online HTML editor, online features about him as well as
the basic configuration has a lot. However, the article covers many of them are relatively limited.
Recently, I need to use in their own projects to the FCKeditor, and has been used for the benefit
of and the JSF-based web application integration. FCKeditor know from the successful conclusion
of the integration, I learned a lot from the Internet knowledge that they have accumulated a lot
of experience, and we would also like to analyze this process.

1. The basic configuration:

a. the basic path
FCKeditor attention should be the basic path of/your web application/FCKeditor folder/
My FCKeditor path is set to: /fck/FCKeditor/

b. file browser and upload path settings:
My personal reference as follows:

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. And JSF integration:

FCKeditor integration with the biggest problem with JSF is that JSF environment from Bean
to read the corresponding value given to the FCKeditor, at the same time to read the results
from inside FCKeditor given data to the appropriate holders of Bean. As a result of this process
in the traditional JSF tag is bound by value are the framework of auto-complete, so here we
need to achieve this process manually.

The following demo to display composed of two parts:

Showing form.jsp editorial content, click the submit button to jump to test.jsp, test.jsp
call for FCKeditor already form.jsp shown in display and edit content. Edit, then click submit,
the page will be re-Jump to form.jsp, show that the modified content.

In fact, this is a very basic editing functions, in forums and blog can be seen in its shadow.

And ContextBean be edited for content holders, its scope is the scope of session. FCKeditor
for ContextServlet to read the contents of the revised and given in ContextBean.

First look at 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>

This page is very simple, in which td is the corresponding ContextBean, ContextBean.name
editorial content for preservation.

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 look at the following

FCKeditor used are all aware of, FCKeditor can call in three ways:

script, jsp and java code tags.

Here, in order to facilitate ContextBean read from the content attribute name as part of
its initial value, I used the third method.

Which FCKeditor fck = new FCKeditor (request, “EditorDefault”); initialization FCKeditor,
the second parameter is the FCKeditor instance id, after the submission of FCKeditor when
the contents of the parameters will be stored in the variable name in the request.

For example, here I chose EditorDefault, so the content of FCKeditor to read the future,
they can adopt the following statement:

request.getParameter ( “EditorDefault”)

<body>
        <form action="http://www.cpworld2000.com/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>

The results of the revised submission to post to /fck/servlet/ContextServlet, the url is mapped ContextServlet.

FCKeditor in ContextServlet responsible for the content of reading and give to the session
of ContextBean. doPost() method for the realization of the function.

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);
    }

Since the servlet is outside the scope of FacesContext, it can not be FacesContext
.getCurrentInstance () to get the current FacesContext, therefore the definition of
its own ContextServlet methods are used to get the 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 != null) return 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;
    }