CKEditor和CKFinder整合实现上传下载功能
2011-10-13 20:29
375 查看
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
<enabled>true</enabled>
<baseURL>/CKEditor_Finder/userfiles/</baseURL>
五.在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>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文件的内容
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+"/"; %> <!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.注释这一部分,这样,在上传一中图片之后,中间就不会有提示了
/*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");*/如果大家看不太明白 或者 是看着不舒服,可以到如下网址下载讲解视频:(也想传到这个网站上,可是好像只能上传图片,所以就传到其他的地方了)
/article/4053357.html
相关文章推荐
- CKEditor和CKFinder整合实现上传下载功能
- CKEditor和CKFinder整合实现上传下载功能
- CKEditor和CKFinder整合实现上传下载功能 【转】
- CKEditor和CKFinder整合实现上传下载功能
- CKEditor和CKFinder整合实现上传下载功能
- CKEditor与CKFinder整合并实现文件上传功能
- CKEditor与CKFinder整合并实现文件上传功能
- ckEditor+ckFinder整合实现上传功能
- CKEditor与CKFinder整合并实现文件上传功能
- struts2整合CKEditor和CKFinder实现上传
- FasfDFS整合Java实现文件上传下载功能实例详解
- 整合springboot+mvc+mybatis(通用mapper)+druid+jsp+bootstrap实现权限管理文件上传下载多数据源切换操作日志记录等功能
- ckeditor+ckfinder 集成 实现上传下载(Image/Flash/File/Other) 有下载连接
- Ckeditor与Ckfinder(java)整合实现富媒体内容编辑(支持文件上传)
- ASP.NET下CKEditor3.6.4结合CKFinder2.3实现文本编辑器的上传功能
- CKEditor整合ckfinder实现图片上传
- JSP使用ckeditor和ckfinder实现富文本及上传功能
- struts2整合CKEditor和CKFinder实现上传
- Ckeditor与Ckfinder整合 上传图片功能(.net版本)
- jsp中如何整合CKEditor+CKFinder实现文件上传