CKEditor与 CKFinder 整合并实现文件上传功能

事先说明：此整合的是java版本的，

用到的有：jsp + ckeditor + ckfinder

在项目中我们使用了FckEditor，但最新又出来了个ckEditor，到官方网站看看才知道FckEditor在2.6版本之后就改名为ckEditor了。

FckEditor里有java版本的配置，可以支持php、asp.net、java版本，现在一下子变为ckEditor了。配置简单的编辑器很简单，我们下载ckEditor就可以使用，我想大多数人都希望能用到编辑器里的浏览/插入图片功能吧。

一．需要的资源：

用到的网站，文件自己下载:

a) ckeditor_3.6.2 （解压）

b) ckeditor-java-3.6.2 （解压）

c) ckfinder_java_2.3.1 （解压）

二．执行步骤：

1. MyEclipse新建 Web Project ： itcastCKEditor

2.解压ckfinder_java_2.3.1，导入相应的jar包，目录在ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\lib下。

以及：

ckeditor-java-3.6.2\WEB-INF\lib下的包，共9个包

3. 查找ckfinder_java_2.3.1\ckfinder\_sources\CKFinder for Java\CKFinder\src\main\java中的包，并将包放置到项目的src下。

4. 复制以下文件夹到WebRoot 下面：

（1）ckfinder_java_2.3.1\ ckfinder\CKFinderJava\ckfinder

（2）ckeditor_3.6.2\ckeditor

5. 复制 CKFinder配置文件到WEB-INF 下面：

ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\config.xml

三．下面删除无用的文件

首先是ckeditor 下面的文件：

_sample,_source, CHANGES.html， ckeditor_php4.php ， ckeditor_php5.php,

ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html

然后是ckfinder 下面的文件：

_samples, help, changelog.txt, install.txt, license.txt, translation.txt

四．修改配置文件config.xml

Xml代码

< enabled > true </ enabled >

<baseURL>/userfiles/</baseURL>

注意：如果发现附件上传成功，但是不能将正确的路径带到URL的时候，可以试图修改以下代码：

<types>

<url>/itcastCKEditor%BASE_URL%files/</url>

<directory>%BASE_DIR%files</directory>

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

</type>

<url>/itcastCKEditor%BASE_URL%images/</url>

<directory>%BASE_DIR%images</directory>

</type>

<url>/itcastCKEditor%BASE_URL%flash/</url>

<directory>%BASE_DIR%flash</directory>

</type>

</types>

红色部分为添加的代码。

< enabled > true </ enabled >

< baseURL > /CKEditor_Finder/userfiles/ </ baseURL >

五．在web.xml 中增加如下代码：

Xml代码

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

<filter-name>FileUploadFilter</filter-name>

<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>

<init-param>

<param-name>sessionCookieName</param-name>

<param-value>JSESSIONID</param-value>

</init-param>

<init-param>

<param-name>sessionParameterName</param-name>

<param-value>jsessionid</param-value>

</init-param>

</filter>

<filter-mapping>

<filter-name>FileUploadFilter</filter-name>

<url-pattern>

/ckfinder/core/connector/java/connector.java

</url-pattern>

</filter-mapping>

<session-config>

<session-timeout>10</session-timeout>

</session-config>< 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 >

< filter >

<filter-name> FileUploadFilter </ filter-name>

<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>

< init-param >

< param-name >sessionCookieName</param-name>

< param-value >JSESSIONID</ param-value >

</ init-param >

< init-param >

< param-name >sessionParameterName</param-name>

< param-value >jsessionid</param-value>

</ init-param >

</ filter >

< filter-mapping >

< filter-name > FileUploadFilter </ filter-name >

< url-pattern >/ckfinder/core/connector/java/connector.java</ url-pattern >

</ filter-mapping >

< session-config >

< session-timeout > 10 </ session-timeout >

</ session-config >

六. 修改ckeditor/config.js文件的内容

Js代码

CKEDITOR.editorConfig = function( config )

{

// Define changes to default configuration here. For example:

// config.language = 'fr';

// config.uiColor = '#AADC6E';

config.language = 'zh-cn'; // 配置语言

// config.uiColor = '#fff'; // 背景颜色

config.width = '800px'; // 宽度

config.height = '300px'; // 高度

// config.skin = 'office2003';// 界面v2,kama,office2003

// config.toolbar = 'Full';// 工具栏风格Full,Basic

// config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;' +

// '隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;

// config.htmlEncodeOutput = true;

//config.startupOutlineBlocks = false;

//配置默认配置

/**config.language = 'zh-cn'; //配置语言

config.uiColor = '#FFF'; //背景颜色

config.width = 400; //宽度

config.height = 400; //高度

config.skin = 'v2'; //编辑器皮肤样式

// 取消 “拖拽以改变尺寸”功能

config.resize_enabled = false;

// 使用基础工具栏

config.toolbar = "Basic";

// 使用全能工具栏

config.toolbar = "Full";

//使用自定义工具栏

config.toolbar =

[

['Source', 'Preview', '-'],

['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],

['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],

['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar','PageBreak'],

'/',

['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],

['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],

['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],

['Link', 'Unlink', 'Anchor'],

'/',

['Format', 'Font', 'FontSize'],

['TextColor', 'BGColor'],

['Maximize', 'ShowBlocks', '-', 'About']

];*/

/*** 文件上传功能的配置-----------------------

config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';

config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images';

config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?type=Flash';

config.filebrowserUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';

config.filebrowserImageUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';

config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';

};CKEDITOR.editorConfig = function (config) {

config.filebrowserBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html' ;

config.filebrowserImageBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images' ;

config.filebrowserFlashBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html?type=Flash' ;

config.filebrowserUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ;

config.filebrowserImageUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ;

config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;

config.filebrowserWindowWidth = '1000';

config.filebrowserWindowHeight = '700';

config.language = "zh-cn" ;

};

注意：红色的代码要配置，如ckfinder/ckfinder.html表示在项目的根目录下需要配置，例如itcastCKEditor/ckfinder/ckfinder.html，但如果在项目的根目录下出现itcastCKEditor/system/ckfinder/ckfinder.html，此时可以使用../ckfinder/ckfinder.html，寻找路径。

七．修改index.jsp文件的内容如下：

Jsp代码

<%@ page language="java" pageEncoding="UTF-8"%>

<html>

<head>

</head>

<body>

<TR>

if( CKEDITOR.instances['ebreContent'] ){

CKEDITOR.remove(CKEDITOR.instances['ebreContent']);

} //解决例外被抛出且未被接住问题

CKEDITOR.replace("ebreContent",{ height: 200, width: 820 });

//CKFinder.setupCKEditor(editor,'../ckfinder/');

</script>

</td>

</tr>

</table>

</TD>

</TR>

</TABLE>

</div>

</form>

</body>

</html><%@ page language = "java" import = "java.util.*" pageEncoding = "utf-8" %>

<%@ taglib uri = "http://ckfinder.com" prefix = "ckfinder" %>

<%@ taglib uri = "http://ckeditor.com" prefix = "ckeditor" %>

String path = request.getContextPath();

String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ;

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

< 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" >

</ head >

< body >

< form action = "getContent" method = "get" >

< textarea cols = "80" id = "editor1" name = "editor1" rows = "10" ></ textarea >

< input type = "submit" value = "Submit" />

</ form >

< ckfinder:setupCKEditor basePath = "/CKEditor_Finder/ckfinder/" editor = "editor1" />

< ckeditor:replace replace = "editor1" basePath = "/CKEditor_Finder/ckeditor/" />

</ body >

</ html >

http://localhost:8080/itcastCKEditor/

（附录）注意：如果出现中文问题，有一个重要的操作上面没有提及：可以试下。
这个操作就是：找到Tomcat/config/server.xml
<Connector port="80" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" URIEncoding="utf-8" />
这个设置中的URIEncoding 是为了在访问的时候,即使访问路径中出现中文也能正常访问. 如果还有其他问题,可以发贴继续交流一下^_^

来源：oschina

链接：https://my.oschina.net/u/1382174/blog/209865

标签

ckeditor

ckfinder

config

servlet