本文說明使用Java語言整合CKEditor + CKFinder
一、本文前題參考：
二、確認CKEditor 相關jar檔
CKEditor 下載
取得 ckeditor-java-core-3.5.3.jar
複製到webapp\WEB-INF\lib
三、確認CKFinder 相關jar檔
CKFinder 下載
取得CKFinder-2.6.1.jar 等相關jar檔
複製到webapp\WEB-INF\lib
四、CKEditor + CKFinder 所需的jar
圖4
五、建立index.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%> <%@ taglib uri="http://cksource.com/ckfinder" prefix="ckfinder"%> <html> <head> <meta charset="utf-8"> <script src="js/jquery.min.1.11.1.js"></script> <script src="ckeditor_4.5.7/ckeditor.js"></script> <link rel="stylesheet" href="ckeditor_4.5.7/contents.css"/> <script src="ckfinder/ckfinder.js"></script> </head> <body> <h2>CKEditor + CKFinder for Java</h2> <form action="getContent" method="get"> <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea> <input type="submit" value="Submit" /> </form> <ckfinder:setupCKEditor basePath="ckfinder/" editor="editor1" /> <ckeditor:replace replace="editor1" basePath="ckeditor_4.5.7/" /> </body> </html>
注意1：ckfinder的官網已換
原使用
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>
需改為
<%@ taglib uri="http://cksource.com/ckfinder" prefix="ckfinder"%>
注意2：
basePath 是js資料夾名稱
例：
本文webapp/ckeditor_4.5.7/ 則 basePath="ckeditor_4.5.7/"
六、測試
本文測試專案名稱為 CKEditorTest9
WEB-INF\config.xml 的baseURL 需改為
<baseURL>http://localhost:8081/CKEditorTest9/userfiles/</baseURL>
注意：
是改為你的專案名稱，例如你的專案名稱為 MyCKEeditor
則<baseURL>http://localhost:8081/MyCKEeditor/userfiles/</baseURL>
也可為 <baseURL>/MyCKEeditor/userfiles/</baseURL>
6.1 進入index.jsp頁
http://localhost:8081/CKEditorTest9/index.jsp
圖6-1 看到網頁，成功使用CKEditor for Java
6.2 進入上傳圖片頁
圖6-2 看到網頁，且上傳圖片成功，就成功使用CKFinder for Java
其它文章
沒有留言:
張貼留言