FCKeditor的好处FCKeditor是强大的web编辑器,实现图文混排,能够实现所见即所得,较其他的文本编辑器来说,FCKeditor能够本地文件上传,还是个不错的编辑工具。近日有需求要使用web编辑器来插入文章的内容,就用到了FCKeditor。下面的例子是FCKeditor2.3在jsp页面中的应用。
1 拷贝FCKeditor文件夹到根目录下
2 拷贝FCKeditor.tld到web-inf下
3 引入FCKeditor.jar和commons-fileuploa.jar到工程中
4 web.xml文件中配置fck
5 jsp页面 导入jar包,声明tld,引入FCKeditor/fckeditor.js,页面使用FCKeditor组件
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <!-- 测试FCKEditor2.3 --> <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>/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> <jsp-config> <taglib> <taglib-uri>/WEB-INF/FCKeditor.tld</taglib-uri> <taglib-location>/WEB-INF/FCKeditor.tld</taglib-location> </taglib> </jsp-config> </web-app>
并在jsp页面中使用编辑器
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" import="java.sql.*,com.fredck.FCKeditor.*" pageEncoding="ISO-8859-1"%> <%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="FCK" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript" src="FCKeditor/fckeditor.js"></script> <title>Insert title here</title> </head> <body> dfddd<br> <FCK:editor id="infoContent" basePath="/FCKeditor/" width="100%" height="400" skinPath="/FCKeditor/editor/skins/silver/" defaultLanguage="zh-cn" tabSpaces="8" imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image" linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File" flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash"> </FCK:editor> </body> </html>