在 CKEditor 加入上傳圖片的功能

在官方網頁提到有這功能，可以上傳也可以瀏覽伺服器端的圖片庫。

CKEDITOR.replace( 'editor1',
    {
        filebrowserBrowseUrl : '/browse.php',
        filebrowserUploadUrl : '/upload.php'
    });

範例講得很簡單，但是怎麼就找不到 browse.php 與 upload.php，搞半天，原來這兩隻後端程式要自己寫。

在動手之前，先搞清楚 CKEditor 有三個地方可以上傳或瀏覽。

• 連結
• 圖片
• Flash

若只是單純的使用上面的範例，這三個地方都會出現上傳與瀏覽的功能，當然可以只啟用瀏覽或上傳其中之一，並不一定都要啟用。

再來也可以只啟用圖片上傳或者 Flash 上傳。

CKEDITOR.replace( 'editor1',
    {
        filebrowserImageUploadUrl : '/upload.php?type=img',
        filebrowserFlashUploadUrl : '/upload.php?type=flash'
    });

下面就是我抄來改寫的 upload.php，只接受圖片上傳。

<?php include '../inc/base.php' ?>
<?php
// 一定要控管權限，不然很危險的
Base::checkAlogined();

$config = array();
$config['type'] = array('img');
$config['img'] = array('jpg','bmp','gif');
$config['img_size'] = 500; //上傳img大小上限 單位：KB
// $config['flash'] = array('flv','swf');
// $config['flash_size'] = 200; //上傳flash大小上限 單位：KB
$config['message'] = '上傳成功'; //上傳成功後顯示的消息，若為空則不顯示

// 判斷是否是非法調用
if(empty($_GET['CKEditorFuncNum'])) {
  exitUpload(1, '', '不允許上傳');
}

$fn = $_GET['CKEditorFuncNum'];
if(!in_array($_GET['type'], $config['type'])) {
  exitUpload(1, '', '不允許上傳該檔案格式');
}

$type = $_GET['type'];
if (isset($_FILES['upload']) && $_FILES['upload']['error'] == UPLOAD_ERR_OK) {

  // 判斷上傳檔格式是否允許
  $fileInfo = pathinfo($_FILES['upload']['name']);
  $fileType = $fileInfo['extension'];
  if(!in_array($fileType, $config[$type])) {
    exitUpload($fn, '', '錯誤的檔案類型！');
  }

  //判斷檔大小是否符合要求
  if($_FILES['upload']['size'] > $config[$type.'_size']*1024) {
    exitUpload($fn, '', '上傳的檔不能超過'.$config[$type.'_size'].'KB！');
  }

  // 自家程式，只是將欄位讀一讀，然後寫到 FileSystem 裡
  $photo = Photo::create($_FILES['upload']);
  Photo::sync($photo);
  exitUpload($fn, MocaConfig::$SWIIBOX_URL.'/showPhoto.php?uuid='.$photo->uuid, $config['message']);
}
else {
  exitUpload($fn, '', '無檔案上傳');
}

// 輸出js調用 - 這是最重要的部份，就是回頭跟 CKEditor 做溝通
function exitUpload($fn, $fileurl, $message) {
  $str = '<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$fn.', "'.$fileurl.'", "'.$message.'");</script>';
  exit($str);
}
?>