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

   

事先说明：此整合的是java版本号的， 用到的有：jsp + ckeditor + ckfinder (没有servlet 及其他框架技术)

一．须要的资源：

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

a) ckeditor_3.6.2 （解压）

b) ckeditor-java-3.6.2 （解压）

c) ckfinder_java_2.1 （解压）

二．运行步骤：

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中添加例如以下代码：

      
       
        ConnectorServlet
        
       
        com.ckfinder.connector.ConnectorServlet
       
       
        
         XMLConfig
        
        
         /WEB-INF/config.xml
        
       
       
        
         debug
        
        
         false
        
       
       
        1
       
      
      
       
        ConnectorServlet
       
       
        /ckfinder/core/connector/java/connector.java
       
      
      
       
        FileUploadFilter
        
       
        com.ckfinder.connector.FileUploadFilter
                       
                           
        
         sessionCookieName
                            
        
         JSESSIONID
                        
                       
                           
        
         sessionParameterName
                            
        
         jsessionid
                        
       
      
      
       
        FileUploadFilter
       
       
        /ckfinder/core/connector/java/connector.java       
       
      
      
       
        10
       
      

六.改动ckeditor/config.js文件的内容

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";};

七．改动index.jsp文件的内容例如以下：

<%@ 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+"/";%>              
      
      
        <%--
       --%>
      
       
       
      
      
        

非常可能或者能够说是肯定：您在訪问之后操作的时候，不会像在我视频里面的那样顺利，尤其是关于中文问题，当中有一个重要的操作上面没有提及：

这个操作就是：找到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.凝视这一部分，这样，在上传一中图片之后，中间就不会有提示了

/*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.htmlEncode(a.ed)+"\074\057\x62\076\074\x2f\x64\151\x76\x3e");*/

假设大家看不太明确  或者 是看着不舒服，能够到例如以下网址下载解说视频：（也想传到这个站点上，但是好像仅仅能上传图片，所以就传到其它的地方了）