天天看點

ckeditor學習筆記3——與ckfinder內建約定:內建

約定:

ckeditor版本:ckeditor_4.2

ckfinder版本:ckfinder_java_2.3.1

內建

在ckfinder與ckeditor內建之前,需要保證,你的ckeditor已經可以正常工作了,就像下圖所示:

ckeditor學習筆記3——與ckfinder內建約定:內建

上圖的項目結構也是非常簡單:

ckeditor學習筆記3——與ckfinder內建約定:內建

內建ckfinder到ckeditor

1.拷貝%ckfinder_home%\ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp\ 目錄下得ckfinder到webapp

2.添加如下jar檔案:

ckeditor學習筆記3——與ckfinder內建約定:內建

3.copy config.xml到WEB-INF目錄下,并修改enabled節點的值為:true。

4.修改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>
	<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>
           

5.建立index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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%>" target="_blank" rel="external nofollow" >
    
    <title>My JSP 'index.jsp' starting page</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" href="ckeditor/styles.js" target="_blank" rel="external nofollow"  type="text/css"></link>
	<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  <script type="text/javascript" src="ckfinder/ckfinder.js"></script></head>
  
  <body>
    <form action="getContent" method="get">
		<textarea cols="80" id="myEditor" name="myEditor" rows="10"></textarea>
		<script >
		// This is a check for the CKEditor class. If not defined, the paths must be checked.
		if ( typeof CKEDITOR == 'undefined' )
		{
			document.write(
				'<strong><span style="color: #ff0000">Error</span>: CKEditor not found</strong>.' +
				'This sample assumes that CKEditor (not included with CKFinder) is installed in' +
				'the "/ckeditor/" path. If you have it installed in a different place, just edit' +
				'this file, changing the wrong paths in the <head> (line 5) and the "BasePath"' +
				'value (line 32).' ) ;
		}
		else
		{
			var editor = CKEDITOR.replace( 'myEditor');
			editor.setData( '<p>Just click the <b>Image</b> or <b>Link</b> button, and then <b>"Browse Server"</b>.</p>' );

			// Just call CKFinder.setupCKEditor and pass the CKEditor instance as the first argument.
			// The second parameter (optional), is the path for the CKFinder installation (default = "/ckfinder/").
			CKFinder.setupCKEditor( editor, '/testCkFinder/ckfinder/' ) ;

			// It is also possible to pass an object with selected CKFinder properties as a second argument.
			// CKFinder.setupCKEditor( editor, { basePath : '../', skin : 'v1' } ) ;
		}
		</script>
		<input type="submit" value="Submit" />
	</form>
  </body>
</html>
           

現在,二者內建已經ok了。

繼續閱讀