2016年4月28日 星期四

CKEditor + CKFinder 基本配置設定之二



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

一、配置CKFinder js 主檔
檔案:ckfinder/ckfinder.js
在html/jsp頁上載入ckfinder.js
<script src="ckfinder/ckfinder.js"></script>
圖1

二、設定CKFinder config js 主檔
檔案:ckfinder/config.js
圖2 加入中文化 config.language = 'zh-tw';


其它設定參考:Server Side Configuration




三、CKEditor Integration 整合
參考:CKEditor Integration


本文使用JavaScript整合,主要API為CKFinder.setupCKEditor
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor( editor, '/ckfinder/' );
'editor1' 是你的textarea id/name
圖3

四、設定ckeditor browser url

filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?type=Images', 
filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files', 
filebrowserImageUploadUrl : 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images', 
filebrowserFlashUploadUrl : 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' 


各url為 ckfinder/ 為基礎。依專案配置不同自訂調整。
圖4

五、測試
5.1 啟動tomcat
http://localhost:8081/CKEditorTest7/index.html
圖5-1

5.2 點選 圖像
圖5-2


5.3 進入影像屬性介面
圖5-3 影像資訊 -> 瀏覽伺服器


5.4 進入 上傳圖片 瀏覽伺服器
圖5-4 進入 ckfinder 上傳圖片介面


5.5 載入圖片
圖5-5 點選一張圖片,會載入圖片影像屬性
會有基本資訊:URL、寬度高度、預覽。


5.6 載入到CKEditor 編輯頁
圖5-6 按下確定後->載入到CKEditor 編輯頁

太好了!到了這裡你成功整合CKEditor及CKFinder了喔!


下載本文測試專案 CKEditorTest7

































其它文章

標籤

Oracle (149) Oracle DB (144) Oracle_DB (143) Oracle SQL (135) JAVA (82) css-基本類 (65) CSS Selector (58) MySQL (58) jQuery (49) JavaScript-基本類 (39) 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) CKEditor (12) JAVA-流程控制類 (12) JAVA_Spring (12) PHP (11) linux cent os (11) MySQL-基本系列教學 (10) SQLite for java (10) Windows (10) c/c++ (10) Notepad++ (9) 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) Hibernate (7) JAVA-OCWCD (7) JavaScript-陣列類 (7) JAVA-程式分享 (6) JAVA.util套件 (6) JavaScript-數學類 (6) MinGw (6) MySQL-其它類 (6) Spring MVC (6) Apache_Tomcat (5) Apache套件_POI (5) CSS (5) JavaScript-Date物件 (5) JavaScript-其它類 (5) PostgreSQL (5) httpd (5) log4j (5) 基本資訊 (5) CSS Properties (4) Dev-C++ (4) Oracle DDL (4) Servlet (4) apache_Maven (4) Android NDK (3) Eclipse IDE for C/C++ (3) HTML5 (3) Hibernate-基本類 (3) JAVA-問題 (3) JAVA-綀習分享 (3) Linux 指令 (3) Proxy Server (3) Spring Mobile (3) Squid (3) maven (3) zk (3) 生活其它 (3) Bootstrap (2) JAVA_IO (2) JAVA_其它_itext套件 (2) JBoss-問題 (2) Jboss (2) MySQL-語法快速查詢 (2) Spring AOP (2) Spring Batch (2) Spring Boot (2) Spring i18n (2) Subversive (2) Tomcat 8 (2) UML (2) c++ (2) c語言綀習題 (2) jQuery Mobile (2) jQuery-事件處理 (2) jQuery-套件類 (2) svn (2) weblogic (2) Apache_JMeter (1) Apache套件_BeanUtils (1) Apache套件_StringUtils (1) Google API (1) HTML5-基本類 (1) JAVA 7 (1) JAVA 日期 (1) JAVA-OCJP (1) JAVA-WEB (1) JAVA_IDE (1) JAVA其它 (1) JBoss Server (1) JMX (1) JSP (1) Java RMI (1) Java String (1) Joda Time (1) Linux_其它 (1) MySQL教學 (1) Oracle_VirtualBox (1) SQL Server (1) SWT (1) Session (1) Struts 2 (1) Tool (1) TortoiseSVN (1) ZK Studio (1) csv (1) grails-其它類 (1) jQuery-進階 (1) java mail (1) java web (1) jsoup (1) modules (1) tomcat (1) 其它類 (1) 圖片工具 (1) 模擬器 (1) 櫻桃鴨 (1) 泰山 (1) 聊天 (1) 聚餐 (1) 開發工具 (1) 開發資訊 (1) 霸王櫻桃鴨 (1)

精選文章

初學 Java 的 HelloWorld 程式

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