下载ckfinder :
http://cksource.com/ckfinder/download
下载下来 war包 放到tomcat 的webapps 下面运行一下,然后拿到ckfinder 文件夹 放到项目中
将tomcat 中 ckfinder下的 WEB-INF中 config.xml 拷贝到项目的WEB-INF 中 说下config.xml 的设置
<enabled>true</enabled><!-- 是否启动CKFinder,默认是false,需要手动改成true --> <baseDir></baseDir><!-- 文件、图片存放的物理路径,会在指定路径下自动创建目录结构。最好不要设置,如果为空会在web应用根目录下创建对应的文件夹,如果设置在与CKEditor整合后根据URL找不到图片--> <baseURL>/ck/userfiles/</baseURL><!-- 上传文件夹的URL配置,注意:需要添加发布的项目名,不添加则无法预览,添加错了则找不到文件 --> <licenseKey></licenseKey> <licenseName></licenseName> <imgWidth>1600</imgWidth> <imgHeight>1200</imgHeight> <imgQuality>80</imgQuality> <uriEncoding>UTF-8</uriEncoding> <forceASCII>false</forceASCII>
在web.xml中添加支持CKFinder的Servlet。
<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的放置路径保持一致 --> /plugin/ckfinder/core/connector/java/connector.java </url-pattern> </servlet-mapping>
页面上使用:
<script type="text/javascript" src="${webRoot}/plugin/ckfinder/ckfinder.js"></script> <input type="text" class="form-control" id="url" > <input type="submit" id="add" class="btn btn-default" onclick="BrowseServer()" value="选择图片"> <script> function BrowseServer() { var finder = new CKFinder() ; finder.basePath = '${webRoot}/plugin/ckfinder/'; //导入CKFinder的路径 finder.selectActionFunction = SetFileField; //设置文件被选中时的函数 // finder.selectActionData = inputId; //接收地址的input ID finder.popup() ; } //文件选中时执行 function SetFileField(fileUrl,data) { document.getElementById("url").value = fileUrl ; } </script>
只是简单集成可用。具体的一些配置再看吧。
原文地址:http://www.cnblogs.com/yqweber/p/3997413.html