How to configure the FCKEditor Web Editor in jsp

FCKEditor is an edited powerful web editor that can be integrated into your asp, php, jsp, and asp.net programs. It can be used after simple configuration, the following describes how to configure FCKEditor in jsp.

Download fckeditor from the official website. Note that there are two packages: The main file and the jsp integration package.

1. Decompress fckeditor_2.2.zip (main file of FCKeditor) and copy the FCKeditor directory to the root directory of the website.
2. Decompress fckeditor-2.3.zip, (jsp, FCKeditor Integration package), role: This is the JSP Integration Pack for using FCKeditor inside a java server page without the complexity of using a Java scriptlets or the javascript api.
3. Copy the two servlets in the FCKeditor-2.3/web/WEB-INF/web. xml, servlet-mapping definition to the web. xml file of your project.

Modify

The Code is as follows:	Copy code
<Servlet-mapping> <Servlet-name> Connector </servlet-name> <Url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector </url-pattern> </Servlet-mapping> <Servlet-mapping> <Servlet-name> SimpleUploader </servlet-name> <Url-pattern>/editor/filemanager/upload/simpleuploader </url-pattern> </Servlet-mapping>

Is

The Code is as follows:	Copy code
<Servlet-mapping> <Servlet-name> Connector </servlet-name> <Url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector </url-pattern> </Servlet-mapping> <Servlet-mapping> <Servlet-name> SimpleUploader </servlet-name> <Url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader </url-pattern> </Servlet-mapping>

4. copy the files under the FCKeditor-2.3/web/WEB-INF/lib directory to the lib folder of your project
5. Add:

// Add at the beginning of the file

The Code is as follows:

Copy code

<% @ Taglib uri = "http://fckeditor.net/tags-fckeditor” prefix =" FCK "%> // Add the desired location <FCK: editor id = "content" basePath = "/FCKeditor /" ImageBrowserURL = "/FCKeditor/editor/filemanager/browser/default/browser.html? Type = Image & Connector = connectors/jsp/connector" LinkBrowserURL = "/FCKeditor/editor/filemanager/browser/default/browser.html? Connector = connectors/jsp/connector" FlashBrowserURL = "/FCKeditor/editor/filemanager/browser/default/browser.html? Type = Flash & Connector = connectors/jsp/connector" ImageUploadURL = "/FCKeditor/editor/filemanager/upload/simpleuploader? Type = Image" LinkUploadURL = "/FCKeditor/editor/filemanager/upload/simpleuploader? Type = File" FlashUploadURL = "/FCKeditor/editor/filemanager/upload/simpleuploader? Type = Flash "> This is default content :) </FCK: editor>

Call FCKeditor

The Code is as follows:

Copy code

(1). FCKeditor custom tag (header file must be added <% @ taglib uri = "/FCKeditor" prefix = "FCK" %>) Display <Form action = "show. jsp" method = "post" target = "_ blank"> <FCK: editor id = "content" basePath = "/FCKeditor/" width = "700" height = "500" skinPath = "/FCKeditor/editor/skins/silver /" ToolbarSet = "Default"> Input </FCK: editor> <Input type = "submit" value = "Submit"> </Form> (2). script language call (the script file <script type = "text/javascript" src = "/FCKeditor/fckeditor. js"> </script> must be referenced) Display <Form action = "show. jsp" method = "post" target = "_ blank"> <Table border = "0" width = "700"> <tr> <td> <Textarea id = "content" name = "content" style = "WIDTH: 100%; HEIGHT: 400px"> input </textarea> <Script type = "text/javascript"> Var oFCKeditor = new FCKeditor ('content '); OFCKeditor. BasePath = "/FCKeditor /"; OFCKeditor. Height = 400; OFCKeditor. ToolbarSet = "Default "; OFCKeditor. ReplaceTextarea (); </Script> <Input type = "submit" value = "Submit"> </Td> </tr> </table> </Form> (3). FCKeditor API call (header file <% @ page language = "java" import = "com. fredck. FCKeditor. *" %> must be added) <Form action = "show. jsp" method = "post" target = "_ blank"> <% FCKeditor oFCKeditor; OFCKeditor = new FCKeditor (request, "content "); OFCKeditor. setBasePath ("/FCKeditor /"); OFCKeditor. setValue ("input "); Out. println (oFCKeditor. create ()); %> <Br> <Input type = "submit" value = "Submit"> </Form> 8. Output: <% String content = request. getParameter ("content "); Out. print (content ); %> OK!

In addition, FCKeditor for Java is uploaded through servlet, not Jsp, so the configuration file web. the "editor/filemanager/browser/default/connectors/jsp/connector" jsp/connector directory in xml does not exist. You only need to configure FCKeditor. java.

 

Editor menu tool Configuration

1. The total configuration file fckconfig. js can be opened in the log book. After modification, the file will be saved as UTF-8 encoding format. Find:

Change FCKConfig. TabSpaces = 0; To FCKConfig. TabSpaces = 1; that is, you can use the Tab key in the editor.

2. If your editor is still used at the front-end of the website, for example, for message book or reply in a diary, you have to consider security.

Do not use the Default toolbar on the front-end. either define the function or use the Basic, that is, the Basic toolbar, which has been defined by the system:

The Code is as follows:	Copy code
FCKConfig. ToolbarSets ["Basic"] = [ ['Bold ', 'italic', '-', 'orderedlist', 'unorderedlist', '-',/* 'link', */'unlink ','', 'style', 'fontsize', 'textcolor', 'bgcolor', '-', 'smiley ', 'specialchar', 'replace ', 'preview'];

This is a modified Basic, which removes the image function and adds a link, because the image and link and flash and image button add functions allow the front-end page to directly access and upload files, fckeditor also supports the right-click function in the editing area.

The Code is as follows:	Copy code
FCKConfig. ContextMenu = [ 'Generic',/* 'link', */'anchor',/* 'image', */'flash', 'select', 'textea ', 'checkbox ', 'Radio', 'textfield ', 'hiddenfield',/* 'imagebutton', */'call', 'bulletedlist ', 'Numberlist', 'tablecell ', 'table', 'form'];

This is also a change to remove the "link, image, FLASH, image button" function of the right mouse button.

3. Find: FCKConfig. FontNames =

The Code is as follows:	Copy code
'Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana ';

Add several common fonts:

The Code is as follows:	Copy code
FCKConfig. FontNames = '; _ GB2312; Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana ';

4. Note that the uploaded file name cannot contain Chinese characters; otherwise, the file cannot be displayed or downloaded through a link.

 

Other problems:

When used in struts + spring + hibernate, the image upload function may report:
The output format must have a' {http://xml.apache.org/xalan=content-handler' property!
If the error occurs, try removing xalan *. jar under the WEB-INF/lib directory.
 
Security Questions:
If FCKEditor can be used by common users at the front end, pay attention to related security issues. Do not use the default ToolBar when using FCKEditor at the front end,
To remove the Add image, flash, and image domain buttons
In fckconfig. js, about 78 rows are configured with values in those arrays, just like a function on the interface. You can force each group of values to try out what they represent. : P
The fckeditorinstallation is complete. For detailed configuration, see the examples in the web/_ samples directory in the fckeditor-2.3.zip folder (jsp, FCKeditor integration package.