ckEditor+ckFinder整合实现上传功能

1.     去http://ckeditor.com/download

http://ckfinder.com/download

下载ckEditor和ckFinder，因为公司项目基本是java项目所以下载java版本

例如：ckeditor-java-3.6.2.zip，ckfinder_java_2.3.zip

 

 

2.     加压下载后的压缩包：

Ckeditor压缩包中的ckeditor文件夹拷入项目根目录中，

Ckfinder压缩包中\ckfinder_java_2.3\ckfinder\_sources\CKFinder forJava\WebApp\src\main\webapp的 ckfinder文件夹拷入项目根目录中。

 

 

3.     项目中引用所需JAR包:

Ckeditor压缩包中\WEB-INF\lib文件夹下的ckeditor-java-core-3.5.3.jar

Ckfinder压缩包解压后有一个CKFinderJava.war文件，接着解压CKFinderJava.war，找到\WEB-INF\lib文件夹下的CKFinder-2.3.jar，CKFinderPlugin-FileEditor-2.3.jar，CKFinderPlugin-ImageResize-2.3.jar，commons-fileupload-1.2.2.jar，commons-io-2.0.1.jar，thumbnailator-0.4.2.jar

将这7个包拷入项目的\WEB-INF\lib文件夹下。

 

 

4.     页面引用js：

<scripttype="text/javascript" src="/ckeditor/ckeditor.js"></script>

<script type="text/javascript"src="/ckfinder/ckfinder.js"></script>

 

 

5.     绑定页面中的textarea：

$(function(){
              var editor = CKEDITOR.replace('mailContents');
              CKFinder.setupCKEditor(editor,'/ckfinder/');
       });

函数中的mailContents为textarea的name属性值

/ckfinder/为ckfinder的项目路径

 

 

6.     配置文件：

在第三步解压的CKFinderJava文件夹的WEB-INF找到config.xml修改第二行的<enabled>false</enabled>为<enabled>true</enabled>设置启用上传功能，

修改第四行的<baseURL>/CKFinderJava/userfiles/</baseURL>把红色部分改为项目保存上传文件的文件夹，保存后放入项目的WEB-INF文件夹下。

打开项目的WEB-INF文件夹下的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>