本文說明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
其它文章
沒有留言:
張貼留言