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

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

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

查看更多 下一篇