Use and configuration of FCKeditor in JAVA

Preparations before work

The plugin is fckeditor_2.4.2.zip [main package of the component], and FCKeditor. Java 2.3.zip [the tag library and jar for Image Upload are provided here ]. These can be downloaded on the http://www.fckeditor.net website!

Configuration

1. Create a project compass, and create a new folder FCKeditor under the WebRoot folder (used to store FCKeditor related files,

Remember to use the same case, because if you need to change the file, there will be a lot of changes, and you are not sure if you want to change it all)

2. Add the editor folder and fckconfig. js, fckeditor. js, fckstyles. xml, and fcktemplates. xml in the FCKeditor_2.4.2 package.

These four files are placed in the FCKeditor directory of the project.

3. Upload the two jar files under webWEB-INFlib in the FCKeditor. Java -2.3.zip package to the WebRootWEB-INFlib directory of the project.

4. Upload the FCKeditor. tld file under src in the FCKeditor. Java -2.3.zip package to the WebRootWEB-INF directory of the project.

5. Create a New UserFiles folder under the WebRoot directory, and create four folders: Image, Flash, File, and Media. They are used to store uploaded images, animations, files, and Media files.

6. Modify the fckconfig. js component configuration file. [Note: You can search for the information before the equal sign in the configuration file to confirm a change ]:

A. FCKConfig. SkinPath = FCKConfig. BasePath + 'Skins/silver /';

This is the style template of the component, so you can determine which style you want to use and change it based on your preferences,

B. FCKConfig. DefaultLanguage = 'zh-cn ';

This is to determine which language you need to use and set it to the above representation to use simplified Chinese;

C. Change the file browsing path:

FCKConfig. LinkBrowserURL = FCKConfig. BasePath + "filemanager/browser/default/browser.html? Connector = connectors/jsp/connector ";
FCKConfig. ImageBrowserURL = FCKConfig. BasePath + "filemanager/browser/default/browser.html? Type = Image & Connector = connectors/jsp/connector ";
FCKConfig. FlashBrowserURL = FCKConfig. BasePath + "filemanager/browser/default/browser.html? Type = Flash & Connector = connectors/jsp/connector ";

Block the corresponding information and use the above

D. Change the path of the uploaded file.

FCKConfig. LinkUploadURL = FCKConfig. BasePath + 'filemanager/upload/simpleuploader? Type = FILE ';
FCKConfig. FlashUploadURL = FCKConfig. BasePath + 'filemanager/upload/simpleuploader? Type = Flash ';
FCKConfig. ImageUploadURL = FCKConfig. BasePath + 'filemanager/upload/simpleuploader? Type = image ';

Block the corresponding information and use the above

7. Modify the web. xml file and add the following content:

There is a webWEB-INFWEB.XML in the FCKeditor. Java -2.3.zip package, copy the content in this node to the corresponding location in your project, it is worth noting that:

<Servlet-name> Connector </servlet-name>
<Servlet-class> com. fredck. FCKeditor. connector orservlet </servlet-class>
<Init-param>
<Param-name> baseDir </param-name>
<! -- This is the file browsing path. You can only select to modify the path, but remember not to change it to "/[project name]/UserFiles /"
Because he is currently running in the root directory of the project, if you want to set the default file directory
Change the webrootupload directory to/upload/. -->
<Param-value>/UserFiles/</param-value>
</Init-param>
<Init-param>
<Servlet-name> SimpleUploader </servlet-name>
<Servlet-class> com. fredck. FCKeditor. uploader. SimpleUploaderServlet </servlet-class>
<Init-param>
<Param-name> baseDir </param-name>
<! -- This is the file upload path. You can only select to modify it, but remember not to change it to "/[project name]/UserFiles /"
Because he is currently running in the root directory of the project, if you want to put the uploaded file under the webrootupload directory,
It needs to be changed to:/rpload/, then -->
<Param-value>/UserFiles/</param-value>
</Init-param>
<Init-param>
<Param-name> debug </param-name>
<Param-value> true </param-value>
</Init-param>
<Init-param>
<! -- Remember to change the value here to TRUE. Whether to enable the upload function -->
<Param-name> enabled </param-name>
<Param-value> true </param-value>
</Init-param>
<Servlet-mapping>
<Servlet-name> Connector </servlet-name>
<Url-pattern>
/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector
</Url-pattern>
</Servlet-mapping>
<! -- Do not forget the code in the bold section above and below -->

<Servlet-mapping>
<Servlet-name> SimpleUploader </servlet-name>
<Url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader </url-pattern>
</Servlet-mapping>

Optimization

All of the above are the configuration process of embedding components into the project. Below we will compress and optimize the components and Remove useless files:

Delete all files under the webrootfckeditoreditorfilemanagerbrowserdefaconnectors ors directory. These files are used to browse files. for jsp files, servlet is used for processing, so these files are redundant.

Delete all files under the WebRootFCKeditoreditorfilemanagerupload directory

Delete unnecessary languages under the WebRootFCKeditoreditorlang directory, such as retaining Chinese [zh-cn.js] and English [EN. js] And fck1_agemanager. js files

Delete unwanted skin files in the WebRootFCKeditoreditorskins directory. Three skins are available and can be deleted as needed.

JSP page usage

★First, add the label statement in the header of the test. jsp page [directory adjustment is not required, it is feasible ]:

★Then add the call statement at the corresponding position on the page. For the FCK tag, you can also add many attributes. Of course, you can also do not add them. Pay attention to the bold area below, I used two common attributes below, one being height adjustment and the other being component style.

This is FCKeditor demo!

★The received parameter can be written in this way.

Others

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:

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.

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 =

'Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana ';

Add several common fonts:

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.