[CKEditor] 增加上傳圖片功能

2011-12-16

現在這個版本(3.x)的上傳圖片功能預設是沒有打開的

工具列[影像]點進去後
裡面原本只會有 [影像資訊] [超連結] [進階]
如果順利完成的話 會在[進階]左邊 出現一個[上傳]

[START]

▼ 首先當然是引入ckeditor檔案 跟Form



▼ javascript需要加上一行

//接著就是寫上server端接收上傳圖片的路徑 -> 這邊就是/upload
CKEDITOR.replace('editor1'
    ,{filebrowserImageUploadUrl : '/upload'}
);

▼ server端(這裡使用PHP)接收上傳圖片部分 也就是上面說的/upload

// 檔案的name預設是upload (我不知道去哪改耶XD 有人知道嗎?)
$fileNameLong = $_FILES['upload']['name'];
//
//  作了一些對圖片的處理後
//
$pathToSave = '/var/www/htdoc/photo/myimage.jpg';
move_uploaded_file($_FILES['upload']['tmp_name'],  $pathToSave);
// 再做一些處理後
// 如果上傳成功就是沒有錯誤訊息
$errorMsg = '';
// 這邊記得回傳給ckeditor
echo "";

都順利的話 最後回傳給ckeditor後
會帶入到工具列[影像]裡面的[影像資訊]頁籤
他會把URL跟圖片預覽都帶進去
再自己做處理囉
接著再按確定
就會插入進文章了

[END]

[UPDATE 20130620]
當一個頁面要放2個以上的 CKEDITOR 時
需要獲得 CKEDITOR 的編號
其實上傳時有同時傳了一個 GET 參數 CKEditorFuncNum
所以回傳時要用到這個參數
上面的文章內容已更新成可以動作了
ref : http://stackoverflow.com/questions/1498628/how-can-you-integrate-a-custom-file-browser-uploader-with-ckeditor