JSP使用FCKeditor控件

2010-11-12

JSP使用FCKeditor控件

文章分类:Java编程

  FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。

FCKeditor控件请到官方网站下载http://www.fckeditor.net，本例主要用到FCKeditor_2.6.3.zip、fckeditor-java-demo-2.4.1.zip、fckeditor-java-2.4.1-bin.zip里面的一些内容，读者可以自行下载。

1. 解开压缩包FCKeditor_2.6.3.zip，将其中的fckeditor文件夹复制到WEB-INF下面，后面可以直接使用。

2. 在页面中使用FCKeditor有两种方式。

方式一：JavaScript的方式

(1)直接使用，见method1.html

Java代码  

1. ＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞   
2. ＜html＞   
3. ＜head＞   
4. ＜script type="text/javascript" src="fckeditor/fckeditor.js"＞＜/script＞   
5. ＜/head＞   
6. ＜body＞   
7. 方法一：通过JavaScript来实现的实现编辑器导入＜br＞   
8. ＜script type="text/javascript"＞   
9. var oFCKeditor = new FCKeditor('FCKeditor1') ;   
10. oFCKeditor.BasePath = "fckeditor/";   
11. //oFCKeditor.BasePath   = "/FCKEditTest/fckeditor/";   
12. oFCKeditor.Width="50%";   
13. oFCKeditor.Height="400";   
14. oFCKeditor.Value="initial value";   
15. //oFCKeditor.ToolbarSet="Basic";   
16. //默认是default   
17. oFCKeditor.ToolbarSet="Default";   
18. oFCKeditor.Create() ;   
19. ＜/script＞   
20. ＜hr＞   
21. ＜/body＞   
22. ＜/html＞  

＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞＜html＞＜head＞＜script type="text/javascript" src="fckeditor/fckeditor.js"＞＜/script＞＜/head＞＜body＞方法一：通过JavaScript来实现的实现编辑器导入＜br＞＜script type="text/javascript"＞var oFCKeditor = new FCKeditor('FCKeditor1') ;oFCKeditor.BasePath = "fckeditor/";//oFCKeditor.BasePath   = "/FCKEditTest/fckeditor/";oFCKeditor.Width="50%";oFCKeditor.Height="400";oFCKeditor.Value="initial value";//oFCKeditor.ToolbarSet="Basic";//默认是defaultoFCKeditor.ToolbarSet="Default";oFCKeditor.Create() ;＜/script＞＜hr＞＜/body＞＜/html＞

 

(2)通过Textarea，祥见method2.html

Java代码  

1. ＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞   
2. ＜html＞   
3. ＜head＞   
4. ＜script type="text/javascript" src="fckeditor/fckeditor.js"＞＜/script＞   
5. ＜script type="text/javascript"＞   
6. window.onload=function(){   
7. var oFCKeditor = new FCKeditor('MyTextarea') ;   
8. oFCKeditor.BasePath = "fckeditor/";   
9. //oFCKeditor.BasePath   = "/FCKEditTest/fckeditor/";   
10. oFCKeditor.ReplaceTextarea();   
11. }   
12. ＜/script＞   
13. ＜/head＞   
14. ＜body＞   
15. 方法二：通过Textarea来实现的实现编辑器导入＜br＞   
16. ＜textarea rows="4" cols="60" name="MyTextarea"＞this is a value＜/textarea＞   
17. ＜/body＞   
18. ＜/html＞  

＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞＜html＞＜head＞＜script type="text/javascript" src="fckeditor/fckeditor.js"＞＜/script＞＜script type="text/javascript"＞window.onload=function(){var oFCKeditor = new FCKeditor('MyTextarea') ;oFCKeditor.BasePath = "fckeditor/";//oFCKeditor.BasePath   = "/FCKEditTest/fckeditor/";oFCKeditor.ReplaceTextarea();}＜/script＞＜/head＞＜body＞方法二：通过Textarea来实现的实现编辑器导入＜br＞＜textarea rows="4" cols="60" name="MyTextarea"＞this is a value＜/textarea＞＜/body＞＜/html＞

 

方式二：在标签使用FCKeditor

在使用标签之前，需要搭建环境。将fckeditor-java-2.4.1-bin.zip包中的fckeditor-java-core-2.4.1.jar、commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar、slf4j-api-1.5.2.jar以及包fckeditor-java-demo-2.4.1.zip中的slf4j-simple-1.5.2.jar复制到lib目录下，并构建环境。

构建完后，就可以在JSP页面中进行使用。祥见页面method_jsp.jsp

Java代码  

1. ＜%@ page language="java" import="java.util.*" pageEncoding="utf-8"%＞   
2. ＜%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%＞   
3. ＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞   
4. ＜html＞   
5. ＜head＞   
6. ＜title＞method_jsp.jsp＜/title＞   
7. ＜/head＞   
8. ＜body＞    
9. 早些版本必需将fckeditor的Value属性必需指定对应的值，且值不能为空。   
10. 而此处版本是2.6.3，该问题已经解决。   
11. ＜FCK:editor instanceName="myEditor" basePath="/fckeditor"＞＜/FCK:editor＞   
12. ＜/body＞   
13. ＜/html＞  

＜%@ 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"＞＜html＞＜head＞＜title＞method_jsp.jsp＜/title＞＜/head＞＜body＞ 早些版本必需将fckeditor的Value属性必需指定对应的值，且值不能为空。而此处版本是2.6.3，该问题已经解决。＜FCK:editor instanceName="myEditor" basePath="/fckeditor"＞＜/FCK:editor＞＜/body＞＜/html＞

 

效果如下图：

在JSP中调用

　　web.xml配置：

　　FckEditor for java 2.4版本

Java代码  

1. 　<servlet>   
2. 　　<servlet-name>Connector</servlet-name>   
3. 　　<servlet-class>   
4. 　　net.fckeditor.connector.ConnectorServlet   
5. 　　</servlet-class>   
6. 　　<load-on-startup>1</load-on-startup>   
7. 　　</servlet>   
8. 　　<servlet-mapping>   
9. 　　<servlet-name>Connector</servlet-name>   
10. 　　<url-pattern>   
11. 　　/fckeditor/editor/filemanager/connectors/*   
12. 　　</url-pattern>   
13. 　　</servlet-mapping>  

　<servlet>　　<servlet-name>Connector</servlet-name>　　<servlet-class>　　net.fckeditor.connector.ConnectorServlet　　</servlet-class>　　<load-on-startup>1</load-on-startup>　　</servlet>　　<servlet-mapping>　　<servlet-name>Connector</servlet-name>　　<url-pattern>　　/fckeditor/editor/filemanager/connectors/*　　</url-pattern>　　</servlet-mapping>

 　

　　在JSP中使用标签调用demo:

　　

Java代码  

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   
2. 　　<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>   
3. 　　<html>   
4. 　　<head>   
5. 　　<title>FckEditor测试</title>   
6. 　　</head>   
7. 　　<body>   
8. 　　FckEditor测试   
9. 　　<hr>   
10. 　　<form action="ShowData.jsp" method="post">   
11. 　　<FCK:editor instanceName="test" height="400pt">   
12. 　　<jsp:attribute name="value"> 这里是http://baike.baidu.com/">数据测试   
13. 　　</jsp:attribute>   
14. 　　</FCK:editor>   
15. 　　<input type="submit" value="提交"/>   
16. 　　<input type="reset" value="重置"/>   
17. 　　</form>   
18. 　　</body>   
19. 　　</html>