ckeditor 是一套網頁所見即所得(WYSWYG)的內文編輯器,功能與介面相當彈性與好用。他的特色,就是把功能都以 plugin 方式來加入,因此你可以加入所需要的 plugin 就好,方便管理,不過大家的習慣性還是全部一起下載回來。

ckeditor 一共分為三種版本下載,分為基本、標準、完整版。上傳功能並沒有被基本版和標準版收入,因此我們要先下載上傳的 plugin 檔案。
Step: 1

  • 下載 Image 的 plugin :http://ckeditor.com/addon/image
  • 解開之後將 image 整個資料夾複製到 ckeditor 自己的外掛資料夾 plugins 下

Step: 2
開啟 ckeditor 的定義檔 config.js

  • 在你的 config.toolbar 記得要加入一項『Image』,工具列才會顯示該 icon。
  • 加入 config.filebrowserImageUploadUrl = ‘/php/upload.php.php’;  //你用來處理上傳檔案的程式位置。

Step: 3
在 upload.php 處理完上傳之後,必須回應(callback)一個訊息給 ckeditor 如下:

echo '<html><body><script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$GET('CKEditorFuncNum').', "'.圖片檔案連結.'","'.顯示處理結果的訊息.'");</script></body></html>';

這樣子才會將相關的圖檔資料顯示在視窗內。

Step: 4
在這個外掛視窗中,還可以發現到一個按鈕叫做『瀏覽伺服器』,這個功能就是可以瀏覽主機上的圖檔,ckeditor 官方是利用他們的 ckfinder 來實作,但我們可以自己寫一個新的介面比較好。
接著一樣在 config.js 加入下列定義語法:

config.filebrowserImageBrowseUrl = '/php/browser.php';  // 放置你的瀏覽檔案程式。

當我們按下『瀏覽伺服器』按鈕時,就會呼叫這個程式 ‘/php/browser.php’ ,所以我們可以在在這支檔案裡面,將圖一一的 list 出來。

Step: 5
在上一個步驟中,我們還少一個手續,應該要在點選圖之後,也要像上傳圖檔功能一樣 ,callback 給視窗相關的圖檔路徑。
因此,我們在每個圖click之後觸發以下動作,將 funcNum 和 fileUrl 回傳:

window.opener.CKEDITOR.tools.callFunction(funcNum,fileUrl);window.close();

補充:

  • config.filebrowserBrowseUrl = “/ckeditor/attachment_files”;
  • config.filebrowserUploadUrl = “/ckeditor/attachment_files”;
  • config.filebrowserFlashBrowseUrl = “/ckeditor/attachment_files”;
  • config.filebrowserFlashUploadUrl = “/ckeditor/attachment_files”;
  • config.filebrowserImageBrowseUrl = “/ckeditor/pictures”;
  • config.filebrowserImageUploadUrl = “/ckeditor/pictures”;
[教學] ckeditor 4.3 開啟上傳圖檔與瀏覽檔案功能
標籤:    

發表迴響