Integrate FCKEditor in JSF/JSP

Currently, FCKEditor (http://www.fckeditor.net/) is a powerful HTML editor in the open source community, the latest version is 2.6, support Java Plug-in version is 2.4Beta1.

For general Java Web applications, we can directly insert JavaScript code to construct pages. This method is easy to operate and is also a common method for all Web pages. However, in actual Java Web applications, apart from the common page editing function, we will inevitably consider uploading images, attachments, and other functions on the page. Therefore, if you simply use JavaScript, you will write a lot of file upload code, and the amount of work is huge. Naturally, we will think of Jsp tags. Are there any ready-made snack-style page tags? The answer is yes. Just as the Java Plug-In I mentioned above has implemented these functions and integrated Apache Commons-FileUpload to upload files to the file server.

The Java Plug-in of version 2.4 has been encapsulated more concisely, different from other versions. The label is used

1. <% @ TaglibUri=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> 

In a JSF application, because the pages are all JSF custom tags, JSF does not automatically bind the values in the backend Bean to the content of other tags. To pass the content of the JSF tag to the body_onload () event through a JavaScript binding. .

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>

When saving the HTML editing content, you only need to get the Parameter object in the page submission through the obtained HttpServletRequest object. The sample code is as follows:

1. Public Map getParamMap (){
2. Return getFacesContext (). getExternalContext (). getRequestParameterMap ();
3. }
4. Public String getParamAsString (String paramName ){
5. ObjectObj=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. StringContent=GetParamAsString("EditorDefault ");
18. If (Content= Null | content. length () = 0 ){
19. SetErrMsg ("Message must not be empty .");
20. Return null;
21. }
22. }

In other aspects, we need to define the Servlet related to FCKEditor in our web. xml:

1. <Servlet>
2. <Servlet-name>Connector Servlet-name>
3. <Servlet-class>
4. Net. fckeditor. connector. ConnectorServlet
5. Servlet-class>
6. <Load-on-startup>1 Load-on-startup>
7. Servlet>
8. <Servlet-mapping>
9. <Servlet-name>Connector Servlet-name>
10. <Url-pattern>
11. /Fckeditor/editor/filemanager/connectors /*
12. Url-pattern>
13. Servlet-mapping>

Note that the/fckeditor web root directory comes from FCKEditor's core package (Ver 2.6) and can be downloaded from the official website.

There is an important file fckconfig. js under the directory/fckeditor, which can be configured with a lot of FCKEditor display styles on the page. You can study it carefully :)

PS: for security concerns, we recommend that you block the Source Code button on the FCKEditor interface to prevent the destruction of malicious scripts by hackers.

In my actual application, I need to use permission control because I want to restrict the permission of uploading files. Fortunately, FCKEditor provides the corresponding UserAction interface, allowing me to implement a class to control permissions.

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. HttpSessionSession=Req. GetSession ();
13. PrincipalPrincipal= (Principal) session. getAttribute (ConstantUtil. SESSION_PRINCIPAL );
14. If (principal! = Null ){
15. UserUser=Principal. GetUser ();
16. If (user. isUploadable ()){
17. Return true;
18. }
19. }
20. Return false;
21. }
22. } Em>

How can I load a custom UserAction class? In the root directory of classes, you need to define a fckeditor. properties file:

1.  <Em Style="Font-style: italic ;">Connector. userActionImpl=Com.Tail. utils. UserActionImpl Em>

In this way, you can control the File Upload permission.

1. How JSF works
2. Combination of Acegi security system and JSF
3. Introduction to JavaServer Faces (JSF)
4. Page navigation in JSF
5. Describes the design patterns used in the JSF framework.