[教學] ckeditor 4.3 開啟上傳圖檔與瀏覽檔案功能

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 開啟上傳圖檔與瀏覽檔案功能

搶先發佈留言

發佈留言取消回覆

[教學] ckeditor 4.3 開啟上傳圖檔與瀏覽檔案功能

搶先發佈留言

發佈留言 取消回覆

發佈留言取消回覆