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 >
< 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" />
这个设置中的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.注释这一部分,这样,在上传一中图片之后,中间就不会有提示了
/*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");*/
相关推荐
ckfinder java使用 富文本编辑框 CKEditor和CKFinder整合实现上传下载功能 可以直接导入使用 整合参考资料: http://guoliang0-0-yahoo-cn.iteye.com/blog/1195348
java与ckeditor和ckfinder整合后实现上传图片功能
Ckeditor + ckfinder整合for JAVA(支持文件上传)
Ckeditor与ckfinder整合forJAVA(支持文件上传) 详细配置文档 有图例 适用4.0版本配置
JAVA工程项目整合ckeditor+ckfinder实现图片上传、文件上传功能。
Ckeditor与ckfinder整合forJAVA(支持文件上传),详细描述,按照步骤操作即可搭建可视化html编辑器
asp.net中调用ckeditor和ckfinder,实现HTML在线编辑的图片上传,本实例将编辑器中的数据提交给页面中的Label1,点击预览按钮之后直接在本页显示编辑器生成的HTML代码。非常简单的,让大牛们见笑了。
最新ckeditor_ckfinder整合超完整版 for PHP版让你的文本编辑器支持图片和FLASH的上传 附ckeditor完整中文配置
php开发--使用 CKEditor 和 CKFinder 实现上传功能 1. 下载安装 CKEditor: 2. 下载安装 CKFinder: 3. 在网页中使用 CKEditor 和 CKFinder: 4. 配置CKFinder进行上传图片,Flash等。 5.Ckfinder实现普通文件...
我到网上找了ckeditor和ckfinder实现上传的 都是出问题的 要么都是文档 也出问题 一大批乱七八糟的文档 让自己配 看着头疼,想想以后自己也用 所以就研究了一个星期 终于把他们集成在一起 实现编辑器 全部功能完美...
ckeditor与ckfinder整合forJAVA(支持文件上传、解决乱码问题)二
在项目中我们使用了FckEditor,但最新又出来了个ckEditor,到官方网站看看才知道FckEditor在2.6版本...配置简单的编辑器很简单,我们下载ckEditor就可以使用,我想大多数人都希望能用到编辑器里的浏览/插入图片功能吧。
ckeditor与ckfinder(java版)整合详细流程 实现了图片的上传功能
JSP中CKEditor+CKFinder的整合 笔者找了很多资料 最后整理出来一个最简洁的方法来和大家分享 已经经过测试 可以运行 成功实现文件上传和浏览
1,根据CKEditor4源文件整合; 2,集成了图片上传功能,详见upload.ashx; 3,集成了文件上传功能,并已将文件按【年月】文件夹分类,以及文件按时间命名; 4,提供了文件上传功能的官方源文件,可自行更改文件命名...
百分百最简单配置,无垃圾污染代码 ...最新版本,jsp整合,后台servlet,javabean,编辑器带上传图片功能。 不足之处:如果上传的资源是中文,前端引用会乱码。 开发环境,myeclipse,数据库 mysql
Ckeditor与ckfinder整合forJAVA(支持文件上传)
将ckeditor4.2与ckfinder整合在一起,使其能上传图片。运行环境vs2010
ckeditor_4.2.2_full整合ckfinder_php_2.4+去掉提示+中文重命名+上传的文件路径带域名
整合ckfinder 的图片上传功能到ckeditor中。可以利用ckfinder上传图片在ckeditor中使用。