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. JavaWeb实现文件上传下载功能实例解析

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

  2. 【转】Android 服务器之SFTP服务器上传下载功能

    原文网址:http://blog.csdn.net/tanghua0809/article/details/47056327 本文主要是讲解Android服务器之SFTP服务器的上传下载功能,也是对之 ...

  3. 【转】Android 服务器之SFTP服务器上传下载功能 -- 不错

    原文网址:http://blog.csdn.net/tanghua0809/article/details/47056327 本文主要是讲解Android服务器之SFTP服务器的上传下载功能,也是对之 ...

  4. JavaWeb实现文件上传下载功能实例解析 （好用）

    转: JavaWeb实现文件上传下载功能实例解析 转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web ...

  5. FasfDFS整合Java实现文件上传下载功能实例详解

    https://www.jb51.net/article/120675.htm 在上篇文章给大家介绍了FastDFS安装和配置整合Nginx-1.13.3的方法,大家可以点击查看下. 今天使用Java ...

  6. fastDFS与java整合文件上传下载

    准备 下载fastdfs-client-java源码 源码地址 密码:s3sw 修改pom.xml 第一个plugins是必需要的,是maven用来编译的插件,第二个是maven打源码包的,可以不要. ...

  7. php实现文件上传下载功能小结

    文件的上传与下载是项目中必不可少的模块,也是php最基础的模块之一,大多数php框架中都封装了关于上传和下载的功能,不过对于原生的上传下载还是需要了解一下的.基本思路是通过form表单post方式实现 ...

  8. WEB文件上传下载功能

    WEB文件上传下载在日常工作中经常用到的功能 这里用到JS库 http://files.cnblogs.com/meilibao/ajaxupload.3.5.js 上传代码段(HTML) <% ...

  9. Struts2实现文件上传下载功能（批量上传）

    今天来发布一个使用Struts2上传下载的项目, struts2为文件上传下载提供了好的实现机制, 首先,可以先看一下我的项目截图 关于需要使用的jar包,需要用到commons-fileupload ...

随机推荐

  1. mysql安装详细步骤图解

    本文转自http://blog.csdn.net/fanyunlei/article/details/21454645 别看图多,其实mysql的安装十分简单,一路next即可,只是注意倒数第三步,设 ...

  2. Append和AppendTo

    Append和AppendTo Append向标签中追加内容 AppendTo把所有匹配的元素追加到元素集合中

  3. 常用类库之.NET中的字符串

    字符串的特性 .不可变性 由于字符串是不可变的的,每次修改字符串,都是创建了一个单独字符串副本(拷贝了一个字符串副本).之所以发生改变只是因为指向了一块新的地址. .字符串池(只针对字符串常量) 当一 ...

  4. jquery选择器:nth-child()与空格:eq() 的区别;

    在一个7x7的表格当中 nth-child(1); td.parents("table").find("tr :nth-child(1)").css(" ...

  5. cdoj 1134 男神的约会 状压dp

    题目链接 给一个10*10的方格, 每个格子里面有0-9,走到一个格子, 就要在这个格子待一段时间, 时间长度为这个格子的数字. 从左上角走到右下角, 要求0-9必须每种格子都要走到, 输出最短时间. ...

  6. Bootstrap Collapse使用

    参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse http://www.w3resource.com/twi ...

  7. Oracle SQL篇（四）group by 分组与分组的加强 rollup

        分组操作group by 和分组的强化(rollup) 分组操作和分组函数的使用,对于编写SQL语句的人来说,是最基本的概念. 我们来看下面的例子: 在这里我们使用员工表EMP scott@D ...

  8. 转: sublime text常用插件和快捷键

    Sublime Text 2是一个轻量.简洁.高效.跨平台的编辑器.博主之前一直用notepdd++写前端代码,用得也挺顺手了,早就听说sublime的大名,一直也懒得去试试看,认为都是工具用着顺手就 ...

  9. nyoj-709-异形卵(水题)

    异 形 卵 时间限制:1000 ms  |  内存限制:65535 KB 难度: 描写叙述 我们探索宇宙,是想了解浩瀚星空的奥妙.但我们却非常少意识到宇宙深处藏匿的危急,它们无时无刻不紧盯着我们的地球 ...

  10. asp.net Page_Load事件加载两次

    Page_Load 即使加上 if(!IsPostBack){ ……} 还时走了2次 这时候 或者看看你的程序和脚本,是不是刷新页面了 或者页面的样式有错误的地方  例如: background:ur ...