CKEditor 整合CKFinder实现文件上传及富文本操作

事先说明:此整合的是java版本的  1,下载需要资源:

a) ckeditor_4.4.5 (解压)(原谅我喜欢功能强大的,如果你不喜欢,可以用basic版的)

http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.5/ckeditor_4.4.5_full.zip

b) ckeditor-java-3.6.6.2 (解压)(这个可以作为一个参考来看看,不想下载也可以,也有.Net版的)

http://download.cksource.com/CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.6.6.2/ckeditor-java-3.6.6.2.war

c) ckfinder_java_2..4.2 (解压)

http://download.cksource.com/CKFinder/CKFinder%20for%20Java/2.4.2/ckfinder_java_2.4.2.zip2.MyEclipse新建WebProject:CKFinder

a.复制以下文件夹到WebRoot下面:

ckfinder_java_2..4.2 \ckfinder\CKFinderJava\ckfinder

注意:CKFinder加粗的是war包解压后的文件夹的名称

ckeditor_4.4.5/ckeditor     b.复制CKFinder配置文件到WEB-INF下面:

ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\config.xml     c.复制下面文件夹下面所有jar文件到WEB-INf/lib下面:

ckfinder_java_2..4.2\ckfinder\CKFinderJava\WEB-INF\lib

ckeditor_4.4.5\WEB-INF\lib

3.下面删除无用的文件

首先是ckeditor下面的文件:所有MarkDown文件全部删除。

_sample,_source,CHANGES.html, INSTALL.html, LICENSE.html

然后是ckfinder下面的文件:

_samples,help, changelog.txt, install.txt, license.txt,translation.txt

4.修改配置文件config.xml(WEB-INF下面的那个config.xml)     a.     <enabled>false</enabled>   把 false改为 ture     b. 搜索baseURL并改为   <baseURL>/CKFinder/userfiles/</baseURL>         注释:这里的CKFinder是你的项目名字,userfiles是你想让文件上传到哪个文件夹里面

5.在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>

6.修改ckeditor/config.js文件的内容     config.filebrowserBrowseUrl =  ‘/CKFinder/ckfinder/ckfinder.html‘ ;       config.filebrowserImageBrowseUrl =  ‘/CKFinder/ckfinder/ckfinder.html?type=Images‘ ;       config.filebrowserFlashBrowseUrl =  ‘/CKFinder/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" ;       //这是预览     config.image_previewText = "/CKFinder/img/"; 
注释:请将CKFinder修改你自己的项目名字

7.修改JSP中的内容:     <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>     <ckfinder:setupCKEditor basePath="/CKEditor_Finder/ckfinder/"         editor="editor1"/>     <ckeditor:replace replace="editor1"  basePath="/CKFinder/ckeditor/" />
注意basePath 8.修改Tomcat中的配置为UTF-8     <Connector port="8088" protocol="HTTP/1.1"                connectionTimeout="20000"                redirectPort="8443"  URIEncoding="utf-8"/> 添加 URIEncoding       解释:这个设置中的URIEncoding是为了在访问的时候,即使访问路径中出现中文也能正常访问 OK!  到这里就全都结束了   自己写好你的Action和Service    启动服务试试看你的富文本编辑器是否搞定了!
可是细心的话你会发现是不能上传图片的   所以接着来: 1.打开ckeditor/plugins/image/dialogs/image.js文件,搜索“c.config.image_previewText”就能找到这段鸟语了,(b.config.image_previewText||"")双引号中的内容全删了,注意别删多了。 2.还是image.js这个文件,搜索“upload”可以找到这一段     id:‘Upload‘,hidden:!0     实际上是有上传按钮的,不过被隐藏了起来,我们把他设置为显示  改为: id:‘Upload‘,hidden:false
经过这两步  再试试就发现一切OK了!既可以上传图片也可以自定义文章样式  也具备了富文本编辑器!

时间: 2024-10-12 02:08:51

CKEditor 整合CKFinder实现文件上传及富文本操作的相关文章

文件上传and富文本页面

文件上传功能: 1.首先在index.jsp的界面上初始化一个表单. <body> <form enctype="multipart/form-data" action="<%=path%>/1.jsp" method="post"> 姓名:<input type="text" name="username"/> 选择文件:<input type=&qu

jsp中如何整合CKEditor+CKFinder实现文件上传

最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人,不会在意这个.笔者使用的版本分别是:CKEditor3.5.3+CKFinder2.0.2,今天笔者整理了一下配置CKEditor和CKFinder的过程,以及需要注意的一些问题,希望对大家有所帮助. 第一:下载CKEditor和CKFinder相关的安装文件 1.在CKEditor官网http:

文件上传功能+富文本页面!!!!!!!!!!!!!!!!

一:文件上传功能 1:首先在index.jsp的界面上初始化一个表单. <body> <form enctype="multipart/form-data" action="<%=path%>/1.jsp" method="post"> 姓名:<input type="text" name="username"/> 选择文件:<input type=&q

servlet文件上传2——复合表单提交(数据获取和文件上传)

上传文件时表单enctype属性必须要更改为<enctype='multipart/form-data'>:采用post提交表单,元素需要有name属性: 利用第三方jar包(commons-fileupload-1.2.1.jar   commons-io-1.3.2.jar )进行普通数据获取和文件上传:普通文本需要用getString("编码格式")方法获取,否则汉字会出现乱码,最开始我一直用的getString()获取,发现传到数据的数据全是乱码,查看流浪器的里面的

PHP多文件上传操作

在前一篇文章里讲到了关于PHP文件上传原理和简单操作举例是单文件上传. http://www.cnblogs.com/lichenwei/p/3879566.html 其实多文件上传和单文件上传大同小异,原理都是一样的,只是在代码上做了点小技巧. 首先还是index.html上传表单,只是把之前上传文件表单里的file更改成了file[] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

Ckeditor与Ckfinder(java)整合实现富媒体内容编辑(支持文件上传)

先来看一下最终的效果图 一.编辑器界面 二.上传图片界面 <!-------------------------------------------------------> 一.安装包下载,我使用的安装包是ckfinder_java_2.3.zip和ckeditor_3.6.3.zip,这两个文件可以分别到http://ckfinder.com/download和http://ckeditor.com/download下载,注意我使用的开发语言是java,所以下载cfinder的时候需要选择

ASP.NET环境下集成CKEditor与CKEditor实现文件上传

1.从http://ckeditor.com网站上下载ckeditor_aspnet_3.6.4与ckfinder_aspnet_2.4; 2.解压下载的文件ckeditor_aspnet_3.6.4.zip,得到 解压下载的文件ckfinder_aspnet_2.4.zip,得到 3.将ckeditor_aspnet_3.6.4\_Samples\bin文件夹下的CKEditor.NET.dll和CKEditor.NET.pdb,以及ckfinder_aspnet_2.4\ckfinder\b

在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor,相信没几个Web程序员不知道的吧.不过,官方已经停止了该产品的更新,其最新版是2.6.6,于2010年2月15日发布. 取代FCKeditor的产品叫CKEditor(Content And Knowledge Editor),与其说是对FCKeditor的升级,不如说是全新的一个产品.相比FCK

fastDFS与java整合文件上传下载

准备 下载fastdfs-client-java源码 源码地址 密码:s3sw 修改pom.xml 第一个plugins是必需要的,是maven用来编译的插件,第二个是maven打源码包的,可以不要. <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactI