CKEditor和CKFinder整合實現上傳下載功能

一、用到的資源。

ckfinder_java_2.4.2.zip

ckeditor_4.2_standard.zip/ckeditor.zip

ckeditor-java-core-3.5.3.zip


二、執行步驟

1. MyEclipse新建 Web Project : test_CKEditor_Finder

2. 複製以下文件夾到WebRoot 下面:

ckfinder_java_2.4.2\ckfinder\ CKFinderJava \ckfinder

注意:CKFinder 加粗的是 war 包解壓後的文件夾的名稱

ckeditor_3.6.2/ckeditor

3. 複製 CKFinder配置文件 到WEB-INF 下面:

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

4. 複製下面文件夾下面所有jar 文件到 WEB-INf/lib 下面:

ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\lib

ckeditor-java-3.6.2\WEB-INF\lib



三. 下面刪除無用的文件

首先是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

<enabled> true </enabled>  
<baseURL> /CKEditor_Finder/userfiles/ </baseURL>


五. 在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>
	<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文件的內容

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


七. 修改index.jsp文件的內容如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://cksource.com/ckfinder" 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>index.jsp</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="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
</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="/test_ CKEditor_Finder/ckfinder/"
		editor="editor1" />
	<ckeditor:replace replace="editor1"
		basePath="/test_ CKEditor_Finder/ckeditor/" />
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章