CKEditor和CKFinder整合实现在线编辑功能

CKEditor与CKFinder整合并实现在线编辑功能

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

一．需要的资源：

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

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

Xml代码  

1. < enabled > true </ enabled >  
2. < baseURL > /CKEditor_Finder/userfiles/ </ baseURL >   

 

五．在web.xml中增加如下代码：

Xml代码  

1. < servlet >  
2.    < servlet-name > ConnectorServlet </ servlet-name >  
3.    < servlet-class > com.ckfinder.connector.ConnectorServlet </ servlet-class >  
4.    < init-param >  
5.         < param-name > XMLConfig </ param-name >  
6.         < param-value > /WEB-INF/config.xml </ param-value >  
7.     </ init-param >  
8.     < init-param >  
9.           < param-name > debug </ param-name >  
10.           < param-value > false </ param-value >  
11.      </ init-param >  
12. < load-on-startup > 1 </ load-on-startup >  
13. </ servlet >  
14.  < servlet-mapping >  
15.         < servlet-name > ConnectorServlet </ servlet-name >  
16.        < url-pattern >/ckfinder/core/connector/java/connector.java</ url-pattern >  
17. </ servlet-mapping >  
18. < filter >  
19. <filter-name> FileUploadFilter </ filter-name>   
20.     <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>  
21.                  < init-param >  
22.                      < param-name >sessionCookieName</param-name>  
23.                      < param-value >JSESSIONID</ param-value >  
24.                  </ init-param >  
25.                  < init-param >  
26.                      < param-name >sessionParameterName</param-name>  
27.                      < param-value >jsessionid</param-value>  
28.                  </ init-param >  
29. </ filter >  
30. < filter-mapping >  
31.         < filter-name > FileUploadFilter </ filter-name >  
32.         < url-pattern >/ckfinder/core/connector/java/connector.java</ url-pattern >  
33. </ filter-mapping >  
34. < session-config >  
35. < session-timeout > 10 </ session-timeout >  
36. </ session-config >   

 

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

Js代码  

1. CKEDITOR.editorConfig =  function (config) {  
2.     config.filebrowserBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html' ;  
3.     config.filebrowserImageBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images' ;  
4.     config.filebrowserFlashBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html?type=Flash' ;  
5.     config.filebrowserUploadUrl =  '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ;  
6.     config.filebrowserImageUploadUrl =  '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ;  
7.     config.filebrowserFlashUploadUrl =  '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;  
8.     config.filebrowserWindowWidth = '1000';  
9.     config.filebrowserWindowHeight = '700';  
10.     config.language =  "zh-cn" ;  
11. };   

 

七．修改index.jsp文件的内容如下：

Java代码  

1. <%@   page   language = "java"   import = "java.util.*"   pageEncoding = "utf-8" %>  
2. <%@   taglib   uri = "http://ckfinder.com"   prefix = "ckfinder"   %>  
3. <%@   taglib   uri = "http://ckeditor.com"   prefix = "ckeditor"   %>  
4. <%  
5. String path = request.getContextPath();  
6. String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ;  
7. %>  
8. <! DOCTYPE   HTML  PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN">  
9. < html >  
10.    < head >  
11.      < base   href = " <%= basePath %> " >  
12.      < title > 首页 </ title >  
13. < meta   http-equiv = "pragma"   content = "no-cache" >  
14. < meta   http-equiv = "cache-control"   content = "no-cache" >  
15. < meta   http-equiv = "expires"   content = "0" >  
16. </ head >  
17.    < body >  
18. < form   action = "getContent"   method = "get" >  
19.     < textarea   cols = "80"   id = "editor1"   name = "editor1"   rows = "10" ></ textarea >  
20.     < input   type = "submit"   value = "Submit"   />  
21. </ form >  
22. < ckfinder:setupCKEditor   basePath = "/CKEditor_Finder/ckfinder/"   editor = "editor1"   />  
23. < ckeditor:replace   replace = "editor1"   basePath = "/CKEditor_Finder/ckeditor/"   />  
24. </ body >  
25. </ html >   

 

http://localhost/CKEditor_Finder/

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

关于破解：

替换预览图片方框的文字为：预览图片的位置。

要替换的文件的位置：/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.注释这一部分，这样，在上传一中图片之后，中间就不会有提示了

Js代码  

1. /*if (!S && (!p || a.bs.indexOf(p) % 8 < 4)) { 
2.     P.mj = J; 
3.     S = 1; 
4. } 
5. if ((P.eu && !T || S) && P.mj) { 
6.      Q.addClass('files_message');   
7.      this.tools.of().setHtml(P.mj); 
8. }*/   

 

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

Js代码  

1. /*if (!B) 
2.     this.dV().getChild(0).appendHtml(y || z || w != 4 ? r:  
3.                                                             s+ "\074\x62\x3e"+ 
4.                                                             i.htmlEncode(a.ed)+ 
5.                                                             "\074\057\x62\076\074\x2f\x64\151\x76\x3e");*/  
   

=====================================================================

以上部分是我从

http://guoliang0-0-yahoo-cn.iteye.com/blog/1195348

网站上复制的，我照着他说的建了个测试项目可以用，但是整合到我的其他项目中就不行了。后来弄了一上午，终于可以用了。把代码贴下来，供以后参考。

1、配置文件WebRoot/WEB-INF/config.xml

Xml代码  

1. < enabled > true </ enabled >  
2. < baseURL > /项目名称/userfiles/ </ baseURL >   

路径不知道可不可以改，因为要赶时间，没试。

2、web.xml

因为我的项目用的是ssh框架，所以web.xml和原作者有点不同。

<welcome-file-list>

    <welcome-file>tologin.action</welcome-file>

  </welcome-file-list>

  

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

 

   <context-param>

<param-name>contextConfigLocation</param-name>

<param-value>/WEB-INF/classes/applicationContext.xml</param-value>

 </context-param>

 <listener>

<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

 </listener>

  

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

  </web-app>

<servlet>  到</session-config> 这段代码是按原作者说的添加进去的，一点不变，但是

<url-pattern>/*</url-pattern>要改成 <url-pattern>*.action</url-pattern>，否则ckfinder不能上传图片

主要是因为<servlet>节点根本就无效，但是改成*.action后项目只能访问后缀为.action的文件，不能直接访问JSP文件，否则报错：STRUTS2中报：The Struts dispatcher cannot be found. This is usually caused by using Struts tags without the associated filter.。不过改成这样后还可以访问servlet（一个项目中既能用struts2又能用servlet）。

3、ckeditor/config.js文件的内容

CKEDITOR.editorConfig = function( config )

{

// Define changes to default configuration here. For example:

// config.language = 'fr';

// config.uiColor = '#AADC6E';

config.filebrowserBrowseUrl =  '/项目名称/ckfinder/ckfinder.html' ;  

        config.filebrowserImageBrowseUrl =  '/项目名称/ckfinder/ckfinder.html?type=Images' ;  

        config.filebrowserFlashBrowseUrl =  '/项目名称/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" ;  

};

4、JSP页面一样

改一下调用路径

<ckfinder:setupCKEditor basePath="/项目名称/ckfinder/" editor = "editor1"/>  

<ckeditor:replace replace="editor1" basePath="/项目名称/ckeditor/"/>  

然后就可以用了。