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");*/

如果大家看不太明白  或者 是看着不舒服，可以到如下网址下载讲解视频：（也想传到这个网站上，可是好像只能上传图片，所以就传到其他的地方了）

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

CKEditor和CKFinder整合实现上传下载功能相关推荐

  1. java文件流 m.jb51.net_FasfDFS整合Java实现文件上传下载功能实例详解

    今天使用Java代码实现文件的上传和下载.对此作者提供了Java API支持,下载fastdfs-client-java将源码添加到项目中.或者在Maven项目pom.xml文件中添加依赖 org.c ...

  2. 教你如何实现c#文件上传下载功能

    简单介绍一下c#文件上传下载功能实现. NuGet 安装SqlSugar Model文件下新建 DbContext 类 public class DbContext {public DbContext ...

  3. JavaWeb实现文件上传下载功能实例解析

    转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...

  4. 文件的上传下载功能的实现（包括进度条）[telerik控件]

    文件的上传下载功能的实现(包括进度条) 1.准备工作 首先我们需要Telerik控件,数据库,上传文件文件夹. Telerik控件: RadUpload.RadProgressManager.RadP ...

  5. ssm框架验证码图片加载不出_基于SSM框架的文件图片上传/下载功能实现

    前一段时间很多做毕业设计的同学问:如何写图片和文件的上传下载功能,今天正好有时间,所以就做了一个案例,详细的讲解这个功能. 框架结构: 对于很多做过开发的而言,上传功能肯定都用过,而且用到的场景很多, ...

  6. 项目_功能模块_基于Spring Boot的文件上传下载功能的设计与实现

    文章目录 基于Spring Boot的文件上传下载功能模块的设计与实现 1.前言 2.技术栈 3.关键源码 4.实现效果 4.1.登录 4.2.文件列表 4.3.上传文件测试 4.3.1.测试图片 4 ...

  7. SpringBoot2.x集成mongoDB4.0实现音频文件的上传下载功能

    最近项目要用到文件上传下载功能,但是这些音频文件都很大,放到关系型数据库就不太好了(其实是太不好了),占内存不说还慢的要死,所以考虑使用分布式文件系统或者非关系型数据库来实现.由于分布式文件系统没有用 ...

  8. java歌曲上传下载功能实现,Java上传下载功能的实现详解

    上传下载是很简单的功能,但是每次用的时候还是要查,这里整理一下 前台: 提交 主要注意: enctype="multipart/form-data" method="po ...

  9. Spring Boot项目集成AWS SDK连接到AWS S3,实现上传下载功能

    本文主要描写在Spring Boot项目里集成AWS SDK连接到AWS S3,实现上传下载功能的具体代码和注意事项.如有不足和错误之处,欢迎指正. AWS S3相关介绍 AWS S3(官网): ht ...

最新文章

  1. python调用离线百度语音识别_python调用百度语音识别api
  2. Linux下mysqldump的使用
  3. HDU-5123-who is the best?
  4. 如何使用ASP.NET Core Web API实现短链接服务
  5. 服务器开放特定端口的方法
  6. 数据清洗-拉格朗日插值
  7. html 刷新页面 未传参数值,vue router路由参数刷新消失问题的解决方法
  8. java实验报告实验六,第六周java实验报告四
  9. multer处理post请求的代码演示
  10. [FZYZOJ 1889] 厨房救济
  11. 【线性代数】矩阵及其运算
  12. 三星schi779 android版本更新,SCH-I779
  13. [附源码]JAVA+ssm计算机毕业设计房屋租赁管理系统设计（程序+Lw)
  14. [小样本图像分割]PANet: Few-Shot Image Semantic Segmentation with Prototype Alignment
  15. 记录自己遇到的问题1
  16. 思科模拟器Boson NetSim安装使用教程
  17. 物联网调查报告：机遇与挑战
  18. 奥鹏教育微学吧JAVA答案_西交20秋《Java语言》在线作业【标准答案】
  19. Redis开发与运维 必备-电子书
  20. 如何在Cisco Packet Tracer中创建2个路由器虚拟局域网

热门文章

  1. 做好准备就能预防Jumpscare？《人偶馆绮幻夜》的恐惧心理探究
  2. 研究生院：“做……还是不做。 没有尝试” –尤达
  3. Eslint讲解及报错解决
  4. ubuntu 火狐浏览器无flash无法播放视频解决办法简单
  5. 模拟键盘的终极模拟2
  6. 笔记本计算机屏幕亮度暗,笔记本屏幕变暗怎么回事 笔记本屏幕时亮时暗解决方法...
  7. 电机控制-速度环设计
  8. 读书笔记：《代码大全第2版》 08.语句
  9. VS生成的exe文件在VS运行没问题，在文件夹打开直接运行出问题的bug解决办法
  10. jquery flot详解