六07

Fckeditor和JSP(Java)项目的整合实例

Posted in 技术·学习, 老余,

使用工具:eclipse 3.2 + tomcat 5.5

1.http://www.fckeditor.net/download 上下载两个包
一个是FCKeditor的文件包,另外一个是针对Java项目的FCKeditor.Java包

2.在eclipse中建立一个web项目TestFCKEditor

3.解压缩Fckeditor. Java包,找到web.xml,打开web.xml,复制其中的如下部分到你的项目下的web.xml文件中

如下所示
<<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>enabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name>
<param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<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>

5.新建一个jsp文件,内容如下:
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD
HTML
4.0
Transitional
//EN”
>
<%…@ taglib uri=“http://fckeditor.net/tags-fckeditor“ prefix=“FCK“ %>
<html>
<head>
<title>FCKeditor – Samples</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name=”robots” content=”noindex, nofollow”>
</head>
<body>
<FCK:editor id=”content”
basePath=”/TestFCKEditor/FCKeditor/”
imageBrowserURL=”/TestFCKEditor/FCKeditor/
editor/filemanager/browser/default/browser
.html?Type=Image&Connector=connectors/jsp/connector”
linkBrowserURL=”/TestFCKEditor/FCKeditor/editor/
filemanager/browser/default/browser.html?Connector
=connectors/jsp/connector” flashBrowserURL=”
/TestFCKEditor/FCKeditor/editor/filemanager/
browser/default/browser.html?Type=Flash&Connector
=connectors/jsp/connector” imageUploadURL=”
/TestFCKEditor/FCKeditor/editor/filemanager/upload/
simpleuploader?Type=Image” linkUploadURL=”
/TestFCKEditor/FCKeditor/editor/filemanager
/upload/simpleuploader?Type=File” flashUploadURL=”
/TestFCKEditor/FCKeditor/editor/filemanager/upload
/simpleuploader?Type=Flash”>
this is default content :)
</FCK:editor>
</body>
</html>
6.复制例子程序中WEB-INF目录下lib下的两个jar包到项目的WEB-INF目录下的lib目录

7.在项目TestFCKEditor目录下建立文件夹UserFiles/Image和UserFiles/Flash,这两个目录表示文件上传后的位置,如果文件夹不存在会出现security error

FCKeditor目录精简说明:
1. 根目录下的文件只留下fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四个文件
2. 删除所有的以_开头的文件和文件夹
3. 删除FCKeditor\editor\filemanager\upload目录下的所有文件
4. 删除FCKeditor\editor\filemanager\browser\default\connectors目录下的所有文件
5. 删除FCKeditor\editor\_source目录

成功后效果演示:

No Comments »