关于CKEditor+CKFinder整合实现上传和浏览

最近在做一个个人小博客，想要实现发表博文时候插入图片的效果，于是在网上浏览有什么好的插件编辑器，就看到了“kec”，哈哈。。
于是。。我从早上9点多。。一直捣鼓到刚才才结束，头都弄大了。。最后总结一下一些经验。。免的跟我一样，想死的心都有了。。

一、 下载源文件：
CKEditer4.2 和 CKEditer 3.6.4 for java : http://ckeditor.com/download
CKFinder2.4 : http://cksource.com/ckfinder/download

由于我有强迫症不想用旧的版本，所以用了最新的4.2，估计也是这个原因弄的我头大。

二、解压三个压缩包：
1、复制ckeditor和ckfinder(是ckfinder_java_2.4解压出来的ckfinder目录下的CKFinderJava.war再解压出来的CKFinderJava文件夹下的ckfinder，有点拗口-0-)到web项目下的WebRoot目录下。
2、复制ckeditor-java-core-3.5.3文件夹的ckeditor-java-core-3.5.3.jar包和CKFinderJava（刚刚那拗口的地方）下WEB-INF的config.xml以及lib所有包到项目中（config.xml放到web项目的WEB-INF下）


三、修改配置文件[/size]
1、config.xml
修改两个地方

<config>
<enabled>true</enabled><!--  默认false就是不给上传--> 
<baseDir></baseDir>
<baseURL>/FCKEditor/upload/userfiles/</baseURL> <!-- 自己项目路径-->

2、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>2</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>  

3、修改ckeditor下面的config.js

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For the complete reference:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config
	 config.filebrowserBrowseUrl = 'FCKEditor/ckfinder/ckfinder.html'; 
	 config.filebrowserImageBrowseUrl = 'FCKEditor/ckfinder/ckfinder.html?type=Images'; 
	 config.filebrowserFlashBrowseUrl = 'FCKEditor/ckfinder/ckfinder.html?type=Flash'; 
	 config.filebrowserUploadUrl = 'FCKEditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files'; 
	 config.filebrowserImageUploadUrl = 'FCKEditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'; 
	 config.filebrowserFlashUploadUrl = 'FCKEditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;
	
	 config.filebrowserWindowWidth = '1000';  
	 config.filebrowserWindowHeight = '700'; 
	 config.language = "zh-cn";//预览区域显示内容
	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'about' }
	];

	// Remove some buttons, provided by the standard plugins, which we don't
	// need to have in the Standard(s) toolbar.
	 config.removeButtons = 'Underline,Subscript,Superscript';

	// Se the most common block elements.
	 config.format_tags = 'p;h1;h2;h3;pre';

	// Make dialogs simpler.
	 config.removeDialogTabs = 'image:advanced;link:advanced';
	
	 
	 
};

四、jsp文件：
1、标签：

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

<head>
		
	</head>
	<%
		Map<String, String> attr = new HashMap<String, String>();
		attr.put("rows", "8");
		attr.put("cols", "50");
		CKEditorConfig config2 = new CKEditorConfig();
		config2.addConfigValue("width", "800");
		config2.addConfigValue("toolbar", "Basic");
	%>
	<body>
			<textarea id="editor1" name="editor1" rows="5" cols="5"></textarea>
			<ckf:setupCKEditor editor="editor1" basePath="/FCKEditor/ckfinder/" />
			<ckeditor:replace replace="editor1" basePath="/FCKEditor/ckeditor/"></ckeditor:replace>
	</body>

这里是第一个弄的我头大的，<ckeditor:replace>标签要放在<ckf:setupCKEditor>下，否者在你上传或者浏览文件就会找不到路径。。。我恨。。
第二个就是如果你发现你能打开上传界面了，但是发现上传的时候没反应，那么你就可能是在struts2环境下的web.xml配置的其他过滤器跟struts2过滤器有冲突，可以把web.xml下struts2节点内容改为

 <filter>
  	<filter-name>struts2</filter-name>
  	<filter-class>
  		org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
  	</filter-class>
  </filter>
  <filter-mapping>
  	<filter-name>struts2</filter-name>
  	<url-pattern>*.action</url-pattern>
  </filter-mapping>
  <filter-mapping>
  	<filter-name>struts2</filter-name>
  	<url-pattern>*.jsp</url-pattern>
  </filter-mapping>

好了。大概就这样了。。不明白可以留言啊。。语言组织不好，凑合看哈