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
<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");*/
假设大家看不太明确 或者 是看着不舒服，能够到例如以下网址下载解说视频：（也想传到这个站点上，但是好像仅仅能上传图片，所以就传到其它的地方了）
CKEditor和CKFinder整合实现上传下载功能的更多相关文章
- JavaWeb实现文件上传下载功能实例解析
转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...
- 【转】Android 服务器之SFTP服务器上传下载功能
原文网址:http://blog.csdn.net/tanghua0809/article/details/47056327 本文主要是讲解Android服务器之SFTP服务器的上传下载功能,也是对之 ...
- 【转】Android 服务器之SFTP服务器上传下载功能 -- 不错
原文网址:http://blog.csdn.net/tanghua0809/article/details/47056327 本文主要是讲解Android服务器之SFTP服务器的上传下载功能,也是对之 ...
- JavaWeb实现文件上传下载功能实例解析 （好用）
转: JavaWeb实现文件上传下载功能实例解析 转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web ...
- FasfDFS整合Java实现文件上传下载功能实例详解
https://www.jb51.net/article/120675.htm 在上篇文章给大家介绍了FastDFS安装和配置整合Nginx-1.13.3的方法,大家可以点击查看下. 今天使用Java ...
- fastDFS与java整合文件上传下载
准备 下载fastdfs-client-java源码 源码地址 密码:s3sw 修改pom.xml 第一个plugins是必需要的,是maven用来编译的插件,第二个是maven打源码包的,可以不要. ...
- php实现文件上传下载功能小结
文件的上传与下载是项目中必不可少的模块,也是php最基础的模块之一,大多数php框架中都封装了关于上传和下载的功能,不过对于原生的上传下载还是需要了解一下的.基本思路是通过form表单post方式实现 ...
- WEB文件上传下载功能
WEB文件上传下载在日常工作中经常用到的功能 这里用到JS库 http://files.cnblogs.com/meilibao/ajaxupload.3.5.js 上传代码段(HTML) <% ...
- Struts2实现文件上传下载功能（批量上传）
今天来发布一个使用Struts2上传下载的项目, struts2为文件上传下载提供了好的实现机制, 首先,可以先看一下我的项目截图 关于需要使用的jar包,需要用到commons-fileupload ...
随机推荐
- HDU OJ 4334 Trouble 2012 Multi-University Training Contest 4
题目:click here 题意: 给定5组数据,每组数据选择一个数,看是否能找到5个数的和为零. 分析: 千万不要~~T~~ 普通线性查找: #include <iostream> #i ...
- input file 模拟
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- VS2010使用DX报错 VS报错之混合模式程序集是针对“v1.1.4322”版的运行时生成的，在没有配置其他信息的情况下，无法在 4.0 运行时中加载该程序集。
更改项目的app.config内容为以下内容 目的是开启对低版本的NETFWK支持 其实出现混合模式集的问题不只是在V1.1.4322这个版本上,在查询解决方案时发现,但凡程序集版本发生改变时,都有可 ...
- VICC国际标准ISO15693下载
疏耦合卡(VICC)国际标准ISO15693-1点击下载 疏耦合卡(VICC)国际标准ISO15693-2点击下载 疏耦合卡(VICC)国际标准ISO15693-3点击下载
- Android源码的下载和编译
由于公司会安排我做硬解码这块,所以最近一直想研究一下Android源码,可是Android源码的下载真的挺麻烦的(可能是我第一次下载),参照网上的方法,没有一个可行的,现在就将我的下载过程和大家分享一 ...
- Laravel后台 + AngularJS前端 的网站构建与维护
最近维护的报修网站,采用Laravel+AngularJS框架搭建,还有很多东西需要熟悉掌握,现将修复的Bug或添加的功能中值得记录的地方总结如下. 其中,需要注意的问题基本是原因不明且不是太严重的问 ...
- android TDD平台插入双卡时，查看允许返回发送报告的选项，去掉勾选，不起作用
请在MultiSimPreferenceActivity.java 下修改 修改1: 函数 isChecked() private boolean isChecked(String prefe ...
- cocos2d-x新手学习之Helloworld(第三篇)[版本号:cocos2d-x-3.1.1]
上篇中,能够正常执行NDK中的样例.可是由cocos2d-x生成的项目,不能编译成功.上一篇戳这里: http://blog.csdn.net/xjjjjjjjjjjj/article/details ...
- 【PAT】1009. Product of Polynomials (25)
题目链接:http://pat.zju.edu.cn/contests/pat-a-practise/1009 分析:简单题.相乘时指数相加,系数相乘即可,输出时按指数从高到低的顺序.注意点:多项式相 ...
- Intellij IDEA创建Maven Web项目
1前言 在创建项目中,IDEA提供了非常多项目模板,比方Spring MVC模板,能够直接创建一个基于Maven的Spring MVC的demo,各种配置都已经设定好了,直接编译部署就能够使用. 最開 ...