FCKeditor(ckeditor )是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor。
CKFinder是一个强大而易于使用的Web浏览器的Ajax文件管理器。其简单的界面使得它直观,快速学习的各类用户,从高级人才到互联网初学者。
下载所需文件
ckeditor:http://ckeditor.com/download
建议Full Package,工具齐全;
以及下载所需JAR包
CKFinder:http://cksource.com/ckfinder/download#java-download
注意:请选择JAVA版下载
配置ckeditor与ckfinder环境
解压下载的ckeditor 以及ckfinder,将解压了的文件夹 拷贝,放置在项目WebRoot目录下
将解压好的相关的JAR包加入lib目录下..
ckeditor 与ckfinder整合在一起(注意目录)
修改ckeditor下面的config.js
配置
添加以下信息:
config.language = "zh-cn" ;
config.image_previewText = ' ';
config.filebrowserBrowseUrl = '/testCK/ckfinder/ckfinder.html' ;
config.filebrowserImageBrowseUrl = '/testCK/ckfinder/ckfinder.html?type=Images' ;
config.filebrowserFlashBrowseUrl = '/testCK/ckfinder/ckfinder.html?type=Flash' ;
config.filebrowserUploadUrl = '/testCK/ckfinder/core/connector/java/connector.java? command=QuickUpload&type=Files' ;
config.filebrowserImageUploadUrl = '/testCK/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ;
config.filebrowserFlashUploadUrl = '/testCK/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;
config.filebrowserWindowWidth = '1000';
config.filebrowserWindowHeight = '700';
引用ckeditor与ckfinder
页面引入对应的JS,以及给textarea添加样式与提示语
最终展示效果:
ckfinder整合在web.xml加入对应的servlet具体加入内容可参考ckfinder解压的web.xml
同时将config.xml
拷贝只项目WEB-INF下面,修改config.xml:设置ckfinder为启动,且设置上传文件的目录
PS: Struts2在web.xml配置有设置为
/*
,所以也会拦截ckfinder的上传路径!
解决方案:修改struts2将/*改为*.action
struts2 2.3.4以下添加拦截器,继承FilterDispatcher
struts2 2.3.4以上(包含),在struts.xml添加
<constant name="struts.action.excludePattern" value="/ckfinder.*" />
即可 效果展示: 图片上传:浏览服务器,可直接选择上传
服务器已存在上传的图片