（1）下载
（ckeditor_4.5.7_full.zip）+（ckfinder_java_2.6.0.zip）
ckeditor
Full Package版本
http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.5.7/ckeditor_4.5.7_full.zip
其他版本 http://ckeditor.com/download
ckfinder
java Free trail版本
https://download.cksource.com/CKFinder/CKFinder%20for%20Java/2.6.0/ckfinder_java_2.6.0.zip?
其他版本 https://cksource.com/ckfinder/download
（2） 解压并拷贝
2.1 ckeditor
将下载的ckeditor_4.5.7_full.zip进行解压得到ckeditor文件夹
2.2 ckfinder
将下载的ckfinder_java_2.6.0.zip进行解压得到ckfinder文件夹
ckfinder文件夹中包含
源代码目录和一个ckfinder的war包，还有install和license
将CKFinderJava-2.6.0.war用解压缩工具进行解压，解压后ckfinder文件夹。
注意，这里要的是从CKFinderJava-2.6.0.war解压的ckfinder，不是从ckfinder_java_2.6.0.zip解压
将2.1中解压的ckeditor文件夹和刚才解压的ckfinder文件夹拷贝到assets目录下
不建议重命名ckeditor和ckfinder文件夹，可以将ckeditor的samples目录和CHANGES.md，README.md，和LICENSE.md删掉，将ckfinder的_samples目录，changelog.txt，install.txt和license.txt删掉。
（3） 引入js
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<c:set var="base" value="<%=basePath%>"></c:set>
<!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=UTF-8">
<!-- 引入ckeditor.js和ckfinder.js -->
<script type="text/javascript" src="${base }/assets/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base }/assets/ckfinder/ckfinder.js"></script>
<title>ckeditor</title>
</head>
<body>
${base }
<p>
<h1>${msg }</h1>
<form>
<!-- 一个textarea -->
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
<!-- 将id为editor1的textarea用ckeditor来操作 -->
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>（4） 整合CKFinder
CKFinder把本地的文件进行上传并使用，下面开始配置CKFinder。
4.1 引入ckfinder.js
引入ckfinder的js，这个我们在第四步已经引入过了
<script type="text/javascript" src="${base }/assets/ckfinder/ckfinder.js"></script>将第3步的js文件修改为下面的
<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor(editor, '${base }/assets/ckfinder/');
</script>如果已经成功引入，点击图片按钮，就可以看到浏览服务器的按钮，并且多了一个上传的切换卡
5.配置CKeditor中config.js
CKEDITOR.editorConfig = function( config ) {
config.height = 300;
config.enterMode = CKEDITOR.ENTER_BR;// 去掉<p>
config.shiftEnterMode = CKEDITOR.ENTER_BR;// 去掉<p>
config.skin = 'office2013';
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'about', groups: [ 'about' ] },
{ name: 'tools', groups: [ 'tools' ] }
];
config.removeButtons = 'About,Flash,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,NewPage,Templates,Scayt,Language,Smiley,Iframe,Save,SelectAll,CreateDiv,BidiRtl,BidiLtr,ShowBlocks';
var p='/ckdemo/assets/';
config.filebrowserBrowseUrl =p+'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = p+'ckfinder/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl = p+'ckfinder/ckfinder.html?type=Flash';
config.filebrowserUploadUrl =p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl =p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
};
6 配置web.xml和ckfinder.xml
不过这个时候并不能浏览服务器的图片资源，需要引入ckfinder.xml，并配置一下web.xml
参考：http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/Extending
将第三步中CKFinderJava-2.6.0.war解压后得到的config.xml拷贝到WEB-INF目录下，最好将其重命名一下，我将其命名为ckfinder.xml
将ckfinder.xml拷贝到WEB-INF目录下，并开始配置web.xml
在web.xml最后面加上如下的配置
<!-- ckfinder -->
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
<init-param>
<description>
Path to configuration file can be relative path inside application,
absolute path on local file system or UNC path.
</description>
<param-name>XMLConfig</param-name>
<param-value>/WEB-INF/ckfinder.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>
/assets/ckfinder/core/connector/java/connector.java
</url-pattern>
</servlet-mapping>
注意事项上面的
<param-value>/WEB-INF/ckfinder.xml</param-value>会加在我们刚拷贝的那个ckfinder.xml而
<url-pattern>
/assets/ckfinder/core/connector/java/connector.java
</url-pattern>一定要把我们的ckfinder路径配置正确，ckfinder在assets目录下
引入ckfinder需要的jar包，jar包在CKFinderJava-2.6.0.war解压后的WEB-INF/lib目录下，根据需要引入相关的jar，CKFinder-2.6.0.jar是必须的，上传文件需要commons-fileupload-1.2.2.jar，和commons-10-2.0.jar，图片缩放需要thumbnailator-0.4.8.jar，其他jar包根据需要自行引入即可。
接下来配置ckfinder.xml
将config标签下的第一个子标签enabled设置为true就可以了，在config.xml的第15行。
<enabled>true</enabled>第二个可选的修改地方是baseURL，如果不改则上传的文件会被放在web容器webapps\ROOT\CKFinderJava\userfiles
此处 baseDir使用的是服务器目录外的路径。此处涉及到虚拟路径的问题：可参考此文章：虚拟路径问题
到这里已经可以上传文件，并且从服务器浏览文件了。
可以浏览服务器已有的图片
此处涉及到，去除ckfinder提示信息的问题。
可参考此文章：CKeditor+ckfinder for Java整合中的问题解决
如果在上传图片的时候，上传了无法正常显示，请查看是否中文乱码？
如果是中文乱码，修改tomcat服务器的配置server.xml的第65行为下。
<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8"/>
扫一扫
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
