生活随笔
收集整理的這篇文章主要介紹了
ckfinder使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?ckeditor環境搭建 ，請參考??JSP中使用CKEditor3.6入門教程
JSP頁面使用富文本控件ckeditor提交表單數據
JSP頁面使用富文本控件ckeditor自定義樣式
JSP使用ckeditor和ckfinder實現富文本及上傳功能 源碼下載
一、下載
ckeditor下載地址為：http://ckeditor.com/download
ckfinder下載地址為：http://ckfinder.com/download
二、解壓你下載的ckeditor-java-x.x.zip 和ckfinder_java_x.x.zip這2個壓縮文件
將ckeditor-java-x.x.zip目錄下的ckeditor文件夾和ckfinder_java_x.x.zip目錄下的 ckfinder_java_x.x\ckfinder\_sources\CKFinderfor_Java\WebApp\src\main\webapp\ckfinder復制到你項目的Webroot根目錄下
三、將你下載的2個文件的lib目錄下的包全部復制到你項目的lib下面
四、ckfinder_java_x.x目錄下的?ckfinder_java_x.x\ckfinder\_sources\CKFinderfor? Java\WebApp\src\main\webapp\WEB-INF目錄下的config.xml文件復制到你項目的 Webroot\WEB-INF目錄下，然后config.xml:
將第一排的<enabled>false</enabled>改為<enabled>true</enabled>；
將第三行的?<baseURL>/code/upload/</baseURL>
（此處為你的上傳文件存放路徑，修改成你根目錄下你想要存放的地方）此處我用的絕對路徑，其中code是項目的名稱，如果不這么寫，上傳圖片獲取的路徑將是/upload/目錄，導致無法正常顯示圖片。
五、修改項目中的web.xml
[html]?view plain
?copy <?xml?version="1.0"?encoding="UTF-8"?>?? <web-app?version="2.5"?xmlns="http://java.sun.com/xml/ns/javaee"?? ????xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"?? ????xsi:schemaLocation="http://java.sun.com/xml/ns/javaee??? ????http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">?? ????<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>?? ????<session-config>?? ????????<session-timeout>10</session-timeout>?? ????</session-config>?? ?? ????<welcome-file-list>?? ????????<welcome-file>index.jsp</welcome-file>?? ????</welcome-file-list>?? </web-app>??
六、配置完成后，在JSP頁面通過taglib方式進行調用--index.jsp
[java]?view plain
?copy <%@?page?language="java"?import="java.util.*"?pageEncoding="gbk"%>?? <%@?taglib?uri="http://ckeditor.com"?prefix="ckeditor"%>????? <%@?taglib?uri="http://ckfinder.com"?prefix="ckfinder"%>???? <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">?? <html>?? ????<head>?? ????????<script?type="text/javascript">?? ????????????function?test()?{?? ?????????????????? ????????????????var?editor_data?=?CKEDITOR.instances.content.getData();?? ????????????????if(editor_data==null||editor_data==""){?? ????????????????????alert("數據為空不能提交");?? ????????????????}else{?? ????????????????????if(confirm(editor_data)){?? ????????????????????document.myform.submit();?? ????????????????????}?? ????????????????}????????? ????????????}?? ????????</script>?? ????????<title>ckeditor富文本測試--?by?jCuckoo</title>?? ????</head>?? ????<body>?? ????????<form?action="doTest.jsp"?name="myform"?method="post">?? ?????????????<ckfinder:setupCKEditor?editor="content"?basePath="ckfinder/"?/>????? ?????????????<ckeditor:editor?basePath="ckeditor/"?????? ????????????????????editor="content"?value="CKEditor?Test......(此處的內容會在編輯器中顯示)--by?jCuckoo?"?/>????? ??????????????<input?type="button"?οnclick="test()"?value="提交數據"/>?? ?????????</form>?? ????</body>?? </html>??
七、測試效果圖
?
八、接受頁面doTest.jsp 代碼及顯示效果
[java]?view plain
?copy <%@?page?language="java"?import="java.util.*"?pageEncoding="gbk"%>?? <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">?? <html>?? ??<head>?? ????<title>獲取傳遞的數據?--?by?jCuckoo</title>?? ??</head>?? ??<body>?? ????<%request.setCharacterEncoding("gbk");?%>?? ????<%=request.getParameter("content")?%>?? ??</body>?? </html>??
?
原博客地址
總結
以上是生活随笔為你收集整理的ckfinder使用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
