首先在http://ckeditor.com/download 下载当前最新的ckeditor,版本为3.6。
同时下载CKEditor for Java 3.5.3。
在http://ckfinder.com/download 下载当前最新的java版本的ckfinder2.0.2 。
解压后,将ckeditor文件夹放到工程的WebRoot目录下
再将
ckfinder文件夹也放到工程的WebRoot目录下(及和ckeditor在同一级)
要注意:ckfinder解压后,其中包括了war,源码等等。上面指的
ckfinder文件夹不是ckfinder_java_2.0.2目录下的ckfinder,而是
ckfinder_java_2.0.2\ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp\ 目录下的ckfinder文件夹,该文件夹下有ckfinder.js文件。
同时将ckfinder_java_2.0.2\ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp\WEB-INF 目录下的config.xml文件拷贝到 当前工程的WEB-INF 目录下。(
注意要修改config.xml配置文件的 baseURL )
config.xml内容如下:
/*将baseURL中的fckeditor改为自己工程名
<maxSize>0</maxSize>表示上传无限制,
如果不是0的话,其参数结尾必须加k或m或g ,否则上传限制大小就为0,这样就无论你上传什么文件都提示文件过大了。
*/
<config>
<enabled>true</enabled>
<baseDir></baseDir>
<baseURL>/fckeditor/userfiles/</baseURL>
<licenseKey></licenseKey>
<licenseName></licenseName>
<imgWidth>1600</imgWidth>
<imgHeight>1200</imgHeight>
<imgQuality>80</imgQuality>
<uriEncoding>UTF-8</uriEncoding>
<forceASCII>false</forceASCII>
<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
<checkDoubleExtension>true</checkDoubleExtension>
<checkSizeAfterScaling>true</checkSizeAfterScaling>
<secureImageUploads>true</secureImageUploads>
<htmlExtensions>html,htm,xml,js</htmlExtensions>
<hideFolders>
<folder>.svn</folder>
<folder>CVS</folder>
</hideFolders>
<hideFiles>
<file>.*</file>
</hideFiles>
<defaultResourceTypes></defaultResourceTypes>
<types>
<type name="Files">
<url>%BASE_URL%files/</url>
<directory>%BASE_DIR%files</directory>
<maxSize>0</maxSize>
<allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip
</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<type name="Images">
<url>%BASE_URL%images/</url>
<directory>%BASE_DIR%images</directory>
<maxSize>0</maxSize> <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<type name="Flash">
<url>%BASE_URL%flash/</url>
<directory>%BASE_DIR%flash</directory>
<maxSize>0</maxSize>
<allowedExtensions>swf,flv</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
</types>
<accessControls>
<accessControl>
<role>*</role>
<resourceType>*</resourceType>
<folder>/</folder>
<folderView>true</folderView>
<folderCreate>true</folderCreate>
<folderRename>true</folderRename>
<folderDelete>true</folderDelete>
<fileView>true</fileView>
<fileUpload>true</fileUpload>
<fileRename>true</fileRename>
<fileDelete>true</fileDelete>
</accessControl>
</accessControls>
<thumbs>
<enabled>true</enabled>
<url>%BASE_URL%_thumbs/</url>
<directory>%BASE_DIR%_thumbs</directory>
<directAccess>false</directAccess>
<maxHeight>100</maxHeight>
<maxWidth>100</maxWidth>
<quality>80</quality>
</thumbs>
<plugins>
<plugin>
<name>imageresize</name>
<class>com.ckfinder.connector.plugins.ImageResize</class>
<params>
<param name="smallThumb" value="90x90"></param>
<param name="mediumThumb" value="120x120"></param>
<param name="largeThumb" value="180x180"></param>
</params>
</plugin>
<plugin>
<name>fileeditor</name>
<class>com.ckfinder.connector.plugins.FileEditor</class>
<params></params>
</plugin>
</plugins>
<basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>
</config>
在web.xml文件中添加如下:
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>
com.ckfinder.connector.ConnectorServlet
</servlet-class>
<init-param>
<param-name>XMLConfig</param-name>
<param-value>/WEB-INF/config.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
/ckfinder/core/connector/java/connector.java
</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>10</session-timeout>
</session-config>
然后要添加需要的jar包:(这些jar包在以上下载的文件都包含了)
ckeditor需要的有:ckeditor-java-core-3.5.3.jar
ckfinder有:
CKFinder-2.0.2.jar
CKFinderPlugin-FileEditor-2.0.2.jar
CKFinderPlugin-ImageResize-2.0.2.jar
Thumbnailator-0.3.3.jar
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
(添加jar包就是将jar拷贝到工程的WEB-INF目录下的lib目录)
新建一个jsp文件,如editor.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%>
<%@page import="com.ckeditor.CKEditorConfig"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>"/>
<title>在线编辑器</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="editor,keyword2,keyword3"/>
<meta http-equiv="description" content="editor"/>
<!--
<link rel="stylesheet" type="text/css" href="styles.css"/>
-->
</head>
<body>
<ckfinder:setupCKEditor editor="editor1" basePath="ckfinder/" />
<ckeditor:editor basePath="ckeditor/"
editor="editor1" value=" " />
</body>
</html>
好了,访问试试看吧,还具有了上传、下载文件功能。 如果想要去除ckfinder中的版权提示信息,参照另一篇文章“ckfinder2.0.2破解”。