一般大家在設定 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 來達到動態增加上傳頁籤。
熱門文章
-
這篇文章要介紹如何使用 WhiteNoise 來處理 Django 的靜態文件,為什麼需要特別方式來處理呢?因為,在開發模式下 (Debug 模式開啟),Django 會有一套預設的機制來替你處理靜態文件。然而,在正式環境下 Django 則強烈建議使用其他的方式來 Serve...
-
當專案想加入自訂的 Libraries 時可以透過 Eclipse 加入並群組化,過程非常方便跟簡單。而且若之前有建立過的 Libraries 也可以直接引入,不需要每新增專案就得重新一一加入 JAR 檔。
-
在使用 Arch Linux 的環境下,若只使用 root 帳號來進行大量操作是不明智的方法。因此為了讓使用 Arch Linux 更安全、彈性的方法之一就是針對各任務建立擁有適當權限的使用者。( 其他 Arch Linux 相關教學可以參考 本篇整理 )
-
自己在 Mac 上除了 Eclipse 之外最常使用的文字編輯器就是 Sublime Text 2,但是單一的黑底白字有時候真的是讓人覺得乏味。透過網路上提供的 Color Schemes 來改變 Sublime Text 2 吧!( 其他 Mac 相關教學可以參考 本篇整理 ...
-
相信在開發 Web Project 時常常會遇到某些頁面內容重複,以往可以使用 JSP include 將會重複的內容引入,但若需要調整頁面版型、風格甚至內容,這些都要重新一一修改,因此基於這個問題衍生出許多頁面規劃的框架,當然今天要介紹的 SiteMesh 也是其中一個。