2016年4月28日 星期四

CKEditor + CKFinder 基本配置設定之一


本文說明CKFinder 整合到CKEditor裡的基本配置設定
使用Java語言。
前題需CKEditor配置:


一、CKFinder 下載
參考上一篇: CKFinder 下載
下載 CKFinder 檔名:ckfinder_java_2.6.1.zip

二、配置CKFinder for Java
本文專案使用eclipse maven Web 專案。
JVM:JDK1.7
Server:Tomcat v7.0
使用Jsp、Servlet 之 Java Web 專案
本文專案名稱為CKEditorTest7


三、取得配置CKFinder war檔
下載檔解壓縮後
ckfinder_java_2.6.1\ckfinder\CKFinderJava-2.6.1.war
找到CKFinderJava-2.6.1.war此檔。(2.6.1 是版本號,依你下載的版本號為主)
解壓縮CKFinderJava-2.6.1.war
圖3 解壓縮後資料夾CKFinderJava-2.6.1
ckfinder
META-INF
WEB-INF
welcome.html


四、配置複製 ckfinder
4.1 複製 ckfinder 資料夾到Java web專案裡webapp下
圖4-1

4.2 複製 lib資料夾到Java web專案裡webapp/WEB-INF下
圖4-2

4.3 複製 config.xml到Java web專案裡webapp/WEB-INF下
圖4-3


五、配置設定 ckfinder

5.1 設定啟用ckfinder,修改WEB-INF/config.xml
ckfinder預設是禁用的為false,需改為啟用true。
<enabled>true</enabled>
圖5-1


5.2 設定上傳檔案資料夾位置 baseDir and baseUrl
baseDir為檔案資料夾位置
本文暫不設定,上傳到webapp預設位置。
(因為baseDir另文說明。)
baseUrl為在web中的url連結
<baseURL>http://localhost:8081/CKEditorTest7/userfiles/</baseURL>
圖5-2

5.3 設定 license
ckfinder 是需付費使用的。
<licenseKey></licenseKey>
<licenseName></licenseName>
本文就不對這點說明了。

六、配置 web.xml
本文只直接複製web.xml
CKFinderJava-2.6.1\WEB-INF\web.xml -> CKEditorTest7\src\main\webapp\WEB-INF\web.xml

主要設定:
配置主要進入點 ConnectorServlet ,這一定要配置,不然就無法上傳檔案了喔!!
 <servlet-name>ConnectorServlet</servlet-name>
  <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
  <init-param>
   <description>
    Path to configuration file can be relative path inside application,
    absolute path on local file system or UNC path.
   </description>
   <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>







七、測試前準備
測試前複製 welcome.html 到
CKFinderJava-2.6.1\welcome.html -> CKEditorTest7\src\main\webapp\welcome.html

圖7-1 確認測試資料是否存在。
_samples是ckfinder的範例測試資料夾。




八、測試
8.1 啟動tomcat 後輸入
http://localhost:8081/CKEditorTest7/welcome.html
圖8-1

8.2 進入測試範例主頁
http://localhost:8081/CKEditorTest7/ckfinder/_samples/index.html
圖8-2


8.3 測試範例分為二大範例
1、使用JavaScript 來啟用CKFinder。
2、使用Java來啟用CKFinder。
主要重點範例:Standalone
圖8-3

九、測試上傳檔案
9.1 進入Standalone 主頁
圖9-1

9.2 點選上傳檔案
圖9-2 選Images -> 上傳檔案 -> 點選要上傳的圖片 -> 開啟舊檔


9.3 上傳成功
圖9-3


其它的範例及功能就自已玩了,這裡就不多說明了。

如無法上傳檔案可能配置有誤,請往上項次核對配置。

十、本文下載點請接續下一篇
請先完成本篇設定及以下測試喔!

接續下一篇:
CKEditor + CKFinder 基本配置設定之二
































其它文章

沒有留言:

張貼留言

標籤

Oracle (150) Oracle DB (144) Oracle_DB (143) Oracle SQL (135) JAVA (84) css-基本類 (65) MySQL (59) CSS Selector (58) jQuery (49) JavaScript-基本類 (39) Spring Boot (38) JavaScript (37) JavaScript HTML DOM (37) JavaScript-HTML_DOM (36) CSS3 (30) JAVA-基本類 (28) jQuery UI (27) Apache (23) Oracle GROUP BY (20) datepicker (20) Android (18) Oracle Date (17) c (17) JAVA-lang套件 (16) Linux (16) Oracle Sub Query (16) Spring-基本類 (16) jQuery-基本類 (16) MySQL-進階系列教學 (15) Android基本類 (14) Grails (14) Oracle join (14) SQLite (13) Spring (13) WIN7-基本類 (13) grails-基本類 (13) linux cent os (13) CKEditor (12) JAVA-流程控制類 (12) JAVA_Spring (12) PHP (11) Spring MVC (11) MySQL-基本系列教學 (10) Notepad (10) Notepad++ (10) SQLite for java (10) Windows (10) c/c++ (10) eclipse (9) jQuery-Selector (9) sqldeveloper (9) DB_Toad (8) JAVA_IDE_Eclipse (8) JavaScript-String類 (8) MySQL DB Toad (8) MySQL-DATE相關 (8) MySQL-函式相關 (8) Spring Bean (8) Android Studio (7) HTML5 (7) Hibernate (7) JAVA-OCWCD (7) JavaScript-陣列類 (7) Docker (6) JAVA-程式分享 (6) JAVA.util套件 (6) JavaScript-數學類 (6) MinGw (6) MySQL-其它類 (6) Servlet (6) centos (6) Apache_Tomcat (5) Apache套件_POI (5) CSS (5) JavaScript-Date物件 (5) JavaScript-其它類 (5) PostgreSQL (5) httpd (5) log4j (5) 基本資訊 (5) 開發工具 (5) CSS Properties (4) Dev-C++ (4) IntelliJ IDEA (4) Oracle DDL (4) Sublime (4) TortoiseSVN (4) apache_Maven (4) Android NDK (3) Eclipse IDE for C/C++ (3) Hibernate-基本類 (3) JAVA-問題 (3) JAVA-綀習分享 (3) JVM (3) Linux 指令 (3) Proxy Server (3) Spring Mobile (3) Spring web (3) Squid (3) VirtualBox (3) maven (3) zk (3) 生活其它 (3) Bootstrap (2) Filter (2) JAVA_IO (2) JAVA_其它_itext套件 (2) JBoss-問題 (2) JSP (2) Jboss (2) Listener (2) MySQL-語法快速查詢 (2) Spring AOP (2) Spring Batch (2) Spring Boot Actuator (2) Spring i18n (2) Subversive (2) Tomcat 8 (2) UML (2) WebJars (2) WinMerge (2) c++ (2) c語言綀習題 (2) jQuery Mobile (2) jQuery-事件處理 (2) jQuery-套件類 (2) putty (2) svn (2) weblogic (2) Apache_JMeter (1) Apache套件_BeanUtils (1) Apache套件_StringUtils (1) Base64 (1) Google API (1) HTML5-基本類 (1) Heap (1) JAVA 7 (1) JAVA SE 、JAVA EE、JAVA ME (1) JAVA 日期 (1) JAVA-OCJP (1) JAVA-WEB (1) JAVA_IDE (1) JAVA其它 (1) JBoss Server (1) JDK (1) JMX (1) JRE (1) Java RMI (1) Java String (1) Joda Time (1) Linux_其它 (1) MySQL教學 (1) Oracle_VirtualBox (1) SQL Server (1) SWT (1) Session (1) Stack (1) Struts 2 (1) Tool (1) ZK Studio (1) csv (1) grails-其它類 (1) jQuery-進階 (1) java mail (1) java web (1) java8 (1) jsoup (1) mockmvc (1) modules (1) tomcat (1) win10 (1) 其它類 (1) 圖片工具 (1) 模擬器 (1) 讀書分享 (1) 開發資訊 (1)

精選文章

初學 Java 的 HelloWorld 程式

撰寫一個JAVA程式 public class HelloWorld{ public static void main(String[ ] args){ System.out.println("我第一支Java程式!!"); } } ...