一般大家在設定 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 來達到動態增加上傳頁籤。
熱門文章
-
Launchd 是設計用來管理系統中的 Process、Application 及 Script,它包含了與 Cron 相同的服務。本文章將要介紹如何透過 Launchd 管理並執行例行性任務於 Mac OS X 上。( 其他 Mac 相關教學可以參考 本篇整理 。If you...
-
之前的文章主要探討的都是一個訊息由一個 Consumer 處理,但若我們需要的是一個訊息同時傳送至所有的 Consumer 的話,我們則需要應用 Publish 與 Subscribe 模式,本篇將討論如何使用這個模式。( 其他 RabbitMQ 相關教學可以參考 本篇整理 )...
-
Jekyll 是一個很方便的網站、部落格產生器,它的功能夠簡潔就是專注在產生一個靜態網站。但也因為這樣,有一些需要動態產生的東西無法透過 Jekyll 直接實現。例如:每當使用者進入頁面,讓網頁產生隨機文章連結。所以,本篇將介紹如何利用 Jekyll 實現隨機文章的功能。( If...
-
本篇針對資料存取採用 Hibernate 與 Spring MVC 達到 CRUD ( 新增、讀取、修改、刪除)功能,DB 方面使用 H2 Data Base。閱讀本篇文章可先參考前一篇 H2 Data Base 設定應該會更有幫助。此外因為資料存取部份複雜,所以會拆成數個部份一...
-
開發 React 應用程式時,比較常遇到的問題就是 bundle.js 或其他檔案太大,導致頁面載入時間過長。但透過 Webpack 與一些優化技巧可以大幅減少整個應用程式大小。因此,本篇將介紹如何利用 Webpack 減少 React 應用程式大小。( If you want ...






