2012-06-20

在 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);
}
?>

沒有留言:

張貼留言