黑色海岸线论坛 - Powered by Discuz! Board

标题: [原创] JSP配置FCKeditor [打印本页]

作者: 风灵风之子 时间: 2007-10-24 01:51 标题: JSP配置FCKeditor

转载请注明出处:www.thysea.com

在Web2.0时代的项目中，不能缺少一个在线的编辑器。因此在项目中整合在线编辑器显得至关重要，本文以配置FCKeditor2.4.3为例，详细介绍FCKeditor的使用。
这个HTML文本编辑器可以让web程序拥有如MS Word这样强大的编辑功能。FCKeditor支持当前流行的浏览器如IE 5.5+，Firefox 1.5+与Netscape 7.1+。
首先，去FCKeditor的主页http://www.fckeditor.net/ ，我们看到目前的最新版本是2.5beta。我们要下载的版本是当前的稳定版2.4.3，除了要下载这个FCKeditor_2.4.3，还需要下载FCKeditor.Java这个包，我们选择最新的版本FCKeditor-2.3。
下载完毕后开始配置，在eclipse下创建一个web工程TestFCKeditor，将FCKeditor_2.4.3解压得到文件夹fckeditor，将其拷入TestFCKeditor这个工程。解压FCKeditor-2.3，将FCKeditor-2.3\web\WEB-INF\lib下的2个jar文件拷入TestFCKeditor工程的相应目录，将FCKeditor-2.3\web\WEB-INF下的web.xml整合到TestFCKeditor工程的web.xml。即

<display-name>FCKeditor Test Application</display-name>


<servlet>

<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>true</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>/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>

复制到相应的web.xml中去。不过有一点需要注意2个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>

并且，SimpleUploader这个servlet的enabled属性改为true，因为需要上传图片和flash的。
还需要在web.xml添加如下的代码：
<jsp-config>

<taglib>

<taglib-uri>/TestFCKeditor</taglib-uri>

<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>

</taglib>

</jsp-config>

同时FCKeditor-2.3\src下的FCKeditor.tld需拷入TestFCKeditor工程的\WebRoot\WEB-INF文件夹下。

到目前为止，我们配置完了FCKeditor，不过这里面有许多文件我们用不着可以删除。下面我们给FCKeditor来做“瘦身”。
（1）
FCKeditor工程fckeditor文件夹下，保留editor文件夹、fckconfig.js、fckeditor.js、fckstyle.xml 和fcktemplates.xml其余都删除。
（2）
删除目录/editor/_source。
（3）
删除/editor/filemanager/browser/default/connectors/下的所有文件。
（4）
删除/editor/filemanager/upload/下的所有文件。
（5）
删除/editor/lang/下的除了en.js, zh.js, zh-cn.js三个文件的所有文件。

[attach]22541[/attach]

OK，“瘦身”完毕，开始修改配置。
主要修改fckconfig.js文件
将FCKConfig.DefaultLanguage修改为FCKConfig.DefaultLanguage
= 'zh-cn' ;
将FCKConfig.TabSpaces修改为
FCKConfig.TabSpaces
= 1 ;
把FCKConfig.LinkBrowserURL等的值替换成以下内容：
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" ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;

最后，fckconfig.js文件，用记录本打开，修改后将文件存为utf-8 编码格式。

我们可以考试测试FCKeditor是否配置成功，
我们写下如下的测试代码：
test.jsp

<%@ page language="java" import="com.fredck.FCKeditor.*" %>

<%@ page contentType="text/html;charset=UTF-8" language="java"%>

<%@ taglib uri="/TestFCKeditor" prefix="FCK" %>

<html>

<head>

<title>FCKTest</title>

</head>

<body>

<FCK:editor id="content" basePath="/TestFCKeditor/fckeditor/"

width="700"

height="500"

skinPath="/TestFCKeditor/fckeditor/editor/skins/silver/"

toolbarSet = "Default"

input

</FCK:editor>

</form>

</body>

</html>

display.jsp

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

out.print(content);

我们用myeclipse将这个工程发布到tomcat下，然后输入http://localhost:8080/FCKeditor/test.jsp ，会发现有错误，我也是考虑了好久才发现，发布到tomcat下没有将fckeditor这个文件夹拷入tomcat下的工程中，只要拷入并且重启Tomcat即可。

让我们看一下运行效果，见下图。

[attach]22542[/attach]

[ 本帖最后由风灵风之子于 2007-10-24 01:57 编辑 ]

作者: 风灵风之子 时间: 2007-10-24 01:54

让我们上传图片看一下预览效果，如下图所示。

[attach]22543[/attach]

[attach]22544[/attach]

提交表单，生成jsp页面,如下图所示。
[attach]22545[/attach]

附源代码
[attach]22546[/attach]

[ 本帖最后由风灵风之子于 2007-10-24 01:59 编辑 ]

作者: starlight 时间: 2007-10-24 08:41

学习下

作者: ◆◆◆◆◆◆ 时间: 2007-10-24 10:01

支持!!!

作者: lopo1983 时间: 2007-10-24 10:09

支持原创

作者: starlight 时间: 2007-10-24 10:21

经过实验发现，上传图片时，图片名应为数字或字母，如果图片名为中文名，插入的图片将无法显示。

作者: 风灵风之子 时间: 2007-10-24 14:46

谢谢
目前正在修改bug中

作者: 北极Ж凤凰 时间: 2007-10-24 17:58

疯子成为搞事业型男人咯

顶

[ 本帖最后由北极Ж凤凰于 2007-10-24 09:59 编辑 ]

欢迎光临黑色海岸线论坛 (http://bbs.thysea.com/)