一般大家在設定 CKEditor 都是透過 conifg.js 來設定,但也可以使用 JavaScript 動態增加圖片上傳功能。本篇紀錄如何替 CKEditor 增加圖片上傳 ( Upload image ) 的功能。
安裝 CKEditor:
首先快速的介紹如何安裝 CKEditor,可以至 CKEditor官方網站 下載最新版本,
下載之後解壓縮可以看到裡面的內容,可以由資料夾命名稍微分類,
_samples : 為 CKEditor 範例區
_source : 為 CKEditor 未精簡過的原始碼,要追 Bug 時可以使用
接著把 CKEditor 需要的部分放進我們的專案 ( 這時我已經拿掉不需要的檔案,請參考 )
接著我們新增檔案於 WebContent/pages/index.jsp 並把需要用的 js 檔案加入,如下面的範例
按照範例已經成功的完成 CKEditor 的初始化。
加入 CKEditor 圖片上傳功能:
透過 CKEDITOR.config.filebrowserUploadUrl 指定上傳檔案處理的程式 Url,接著再把圖片上傳的頁籤加上,完整範例如下:
當然可以再加入上傳參數的動作,在設定 Action URL 的後面再代入參數,詳細如下:
接著把顯示完成的結果,為了畫面的簡潔只使用的幾個工具按鈕,至於工具列的設定網路上已經有很多相關文章可以參考。
如此一來就可以透過上述的 javascript function 來達到動態增加上傳頁籤。
熱門文章
-
為了方便其他人參考 Spring Framework 相關教學,因此將發表過的文章整理詳細列出。之後若發表其他有關 Spring Framework 的文章會同步更新此篇內容。
-
這篇要來介紹如何自動啟動 ( auto start )、停止 ( auto stop ) Play Framework Application,因為在完成專案之後,使用 PROD 模式常常需要啟動、重啓專案,目前好像還沒有看到官方提出的方法,所以我整理了我自己的方式來達到重啟、停...
-
為了打好 iOS 開發的基礎,我們需要先稍微暸解 Storyboard 是怎麼運作的,所以我將在這篇文章中簡單介紹 Sotryboard 的運作流程以及 Storyboard 與你的程式碼 (.swift) 是怎麼連結起來的。最後,本篇文章是基於 Swift 4 的環境下進行...
-
最近在系統重整,加上 Google App Engine SDK 不再支援 Java 6 了,因此趁機會將 Java 6 移除並記錄下來方便參考 ( Java 7 安裝路徑與 6 不同 )。( 其他 Mac 相關教學可以參考 本篇整理 )
-
相信大家有時等待測試、shell script 完成任務需要很長的時間,因此希望任務完成可以即時收到通知。在 Mac 上有 Growl 可以滿足這個需求,但 Growl 是收費軟體。所以我採用 terminal-notifier 工具發送 OS X 的通知 ( Notific...






