FCKEditor to use. Modify the source code Experience

2010-12-30  来源:本站原创  分类:Web  人气:128 

FCKEditor to use, modify the source code Experience

Of: Liu Yan

Email: [email protected]


Ado, engaged in a web developer who probably know FCKeditor is used as online HTML editor, similar to the word of the editors tried to show the way, in fact, is still behind the scenes turned into HTML script. Because I use the Java language, Java-based development environment is also IDE, other languages please refer to the integration and use google. Fck in the use of some of the problems encountered, we need to modify the source code and check it out (okay it is open source) can be resolved.


From the site http://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.4.1/ Download compressed package, and source code package src (meaning the source code, version varies, the individual feels sufficiently 2.4.1 a)

Use in their projects FCKeditor:

1. In their own web project, add about jar package

/ FCKDemo/WebRoot/WEB-INF/lib/commons-fileupload-1.2.1.jar

/ FCKDemo/WebRoot/WEB-INF/lib/commons-io-1.3.2.jar

/ FCKDemo/WebRoot/WEB-INF/lib/slf4j-api-1.5.2.jar

/ FCKDemo/WebRoot/WEB-INF/lib/slf4j-simple-1.5.2.jar

/ FCKDemo/WebRoot/WEB-INF/lib/java-core-2.4.1.jar

Java-core-2.4.1.jar which is a java program fck their original package, which includes the core servlet fck and some auxiliary util processing class. It fckeditor-java-2.4.1-bin.zip root directory. commons-fileupload-1.2.1.jar, commons-io-1.3.2.jar, slf4j-api-1.5.2.jar in fckeditor-java-2.4.1-bin.zip the lib below the slf4j-simple- 1.5.2.jar need to download the reader from the Internet.

2. In your web project add the following fckeditor.properties src file, as follows

connector.userFilesPath = / UserUploadFile

connector.resourceType.file.extensions.allowed = | jpg | gif | png | rar | zip | txt | doc | wma | wmv | mp3 | flv | swf |

connector.resourceType.media.extensions.allowed = | wma | wmv | mp3 | flv | swf |

connector.resourceType.image.extensions.allowed = | jpg | png | gif |

connector.resourceType.flash.extensions.allowed = | swf |

connector.userActionImpl = net.fckeditor.requestcycle.impl.UserActionImpl

fckeditor.basePath = / fckeditor

fckeditor.skinPath = / skins / silver /

Configuration file inside the configuration you a look that smart to know what that means in English, although the author of English is poor, but also probably know the general meaning of configuration.

3. The introduction of the javascript file fckeditor

To download the source package fckeditor-java-2.4.1-src.zip in

fckeditor-java-2.4.1-src.zip \ fckeditor-java-2.4.1 \ java-demo \ src \ main \ webapp under the fckeditor folder after extracting it to your page, copy the entire folder. The same level with the fckeditor folder and create a folder called UserUploadFile used to store user uploaded files.

4. Add fckservlet:

Modify web.xml, as follows

<!-FCK the servlet ->


<servlet-name> Connector </ servlet-name>

<servlet-class> net.fckeditor.connector.ConnectorServlet </ servlet-class>

<load-on-startup> 1 </ load-on-startup>

</ Servlet>


<servlet-name> Connector </ servlet-name>

<url-pattern> / fckeditor / editor / filemanager / connectors / * </ url-pattern>

</ Servlet-mapping>

OK, complete the above steps, basically put FCKEditor added to your web project, the.

Let's write a JSP page to test the effect of

Create a JSP page form.jsp, reads as follows:

<% @ Page language = "java" import = "java.util .*" pageEncoding = "utf-8"%>

<% @ Taglib uri = "http://java.fckeditor.net" prefix = "FCK"%>

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN">



FCK page <title> by-Su Huanzhen test </ title>

<meta http-equiv= "pragma" content= "no-cache">

<meta http-equiv= "cache-control" content= "no-cache">

<meta http-equiv= "expires" content= "0">

<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3">

<meta http-equiv= "description" content= "This is my page">

<! -

<link rel="stylesheet" type="text/css" href="styles.css">


</ Head>


<Table width = "886" height = "345" border = "0" cellpadding = "0"

cellspacing = "0">



<form action= "result.jsp" method= "post">

<FCK:editor InstanceName= "content" height= "345">

<jsp:attribute name= "value">

</ Jsp: attribute>

</ FCK: editor>

<input type= "submit" value= "submit">

</ Form>

</ Td>

</ Tr>

</ Table>

</ Body>

</ Html>

In a new display page result.jsp, reads as follows

<% @ Page language = "java" import = "java.util .*" pageEncoding = "utf-8"%>


String content = request.getParameter ("content");

content = new String (content.getBytes ("iso-8859-1"), "UTF-8");

System.out.println ("---------------------");

out.println (content);

System.out.println ("---------------------");


Start the web server, open IE enter the url:, results are as follows:
FCKEditor to use. Modify the source code Experience

Edit it, upload an image to try, the effect is as follows

FCKEditor to use. Modify the source code Experience

After the submission is shown below

FCKEditor to use. Modify the source code Experience