CKEditor与CKFinder整合并实现文件上传功能

最新推荐文章于 2016-12-12 10:11:48 发布

lujianing2011

最新推荐文章于 2016-12-12 10:11:48 发布

阅读量638

点赞数

一．需要的资源：

用到的网站，文件自己下载:

a) ckeditor_3.6.2 （解压）
download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.2/ckeditor_3.6.2.zip

b) ckeditor-java-3.6.2 （解压）
download.cksource.com/CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.6.2/ckeditor-java-3.6.2.war

c) ckfinder_java_2.1 （解压）
download.cksource.com/CKFinder/CKFinder%20for%20Java/2.1/ckfinder_java_2.1.zip

二．执行步骤：
1.MyEclipse新建Web Project：CKEditor_Finder
2.复制以下文件夹到WebRoot下面：
ckfinder_java_2.1\ckfinder\CKFinderJava\ckfinder
注意：CKFinder加粗的是war包解压后的文件夹的名称
ckeditor_3.6.2/ckeditor
3.复制CKFinder配置文件到WEB-INF下面：
ckfinder_java_2.1\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中增加如下代码：

[html]view plaincopy 
   
 <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文件的内容

[javascript]view plaincopy 
   
 CKEDITOR.editorConfig = function(config) {    
 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";    
 };  

[html]view plaincopy 
   
 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>    
 <%@ taglib uri="http://ckfinder.com" 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>首页</title>    
 <meta http-equiv="pragma" content="no-cache">    
 <meta http-equiv="cache-control" content="no-cache">    
 <meta http-equiv="expires" content="0">    
 </head>    
   <body>    
 <%--<ckfinder:ckfinder basePath="/CKFinderJava_0100/ckfinder/" width="700" height="500" /> --%>    
 <form action="getContent" method="get">    
 <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>    
 <input type="submit" value="Submit" />    
 </form>    
 <ckfinder:setupCKEditor basePath="/CKEditor_Finder/ckfinder/" editor="editor1" />    
 <ckeditor:replace replace="editor1" basePath="/CKEditor_Finder/ckeditor/" />    
   </body>    
 </html>    

http://localhost/CKEditor_Finder/
很可能或者可以说是肯定：您在访问之后操作的时候，不会像在我视频里面的那样顺利，尤其是关于中文问题，其中有一个重要的操作上面没有提及：
这个操作就是：找到Tomcat/config/server.xml
<Connector port="80" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" URIEncoding="utf-8" />
这个设置是为了在访问的时候,即使访问路径中出现中文也能正常访问. 如果还有其他问题,可以发贴继续交流一下^_^

关于破解：
替换方框的文字为：预览图片的位置。
要替换的文件的位置：/CKEditor_Finder/WebRoot/ckeditor/plugins/image/dialogs/image.js
Ckfinder.js文件的修改：
1.CKEditer/config.js文件大括号最后添加：
config.image_previewText = "预览图片的位置！自己修改！！ ";

(以下修改的文件均为：ckfinder/ckfinder.js文件)
2.return a.bF.length > 0 && A.indexOf(a.bF.substr(0, 9)) != -1 改为return false;
3.注释这一部分，这样，在上传一中图片之后，中间就不会有提示了

[html]view plaincopy 
   
 /*if (!S && (!p || a.bs.indexOf(p) % 8 < 4)) {   
 P.mj = J;   
 S = 1;   
 }   
 if ((P.eu && !T || S) && P.mj) { Q.addClass('files_message'); this.tools.of().setHtml(P.mj);   
 }*/  

4.注释掉这个部分：这样，左下角的东西就看不见了

/*if (!B)this.dV().getChild(0).appendHtml(y || z || w != 4 ? r: s+ "\074\x62\x3e"+i.htmlEncod

lujianing2011

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CKEditor与CKFinder整合并实现文件上传功能

一．需要的资源：用到的网站，文件自己下载:a) ckeditor_3.6.2 （解压）download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.2/ckeditor_3.6.2.zipb) ckeditor-java-3.6.2 （解压）download.cksource.com/CKEditor/CKEdit
复制链接

扫一扫