[CKEditor] 增加上傳圖片功能

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

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

[START]

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

<script src="/js/ckeditor/ckeditor.js"></script>
<!-- textarea記得加上class="ckeditor" 這樣就可以使用預設的ckeditor了 -->
<form id="form1" name="form1" action="/goupdate" method="post">
<textarea id="editor1" name="editor1" class="ckeditor"></textarea>
<input type="submit" value="送出">
</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 "<script>";
if($errorMsg==''){
    // $fileUrl是圖片網址 就自己先處理好吧
    $fileUrl = "http://www.mysite.com/photo/myimage.jpg";
    echo "window.parent.CKEDITOR.tools.callFunction(2,'" . $fileUrl . "','');";
} else {
    echo "alert('".$errorMsg."');";
}
echo "</script>";

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

[END]