首页 > 代码库 > CKEditor 整合CKFinder实现文件上传及富文本操作
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.zip
2.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了!既可以上传图片也可以自定义文章样式 也具备了富文本编辑器!
CKEditor 整合CKFinder实现文件上传及富文本操作