這幾天做的一個項目中需要在所見即所得編輯器中實現(xiàn)圖片上傳的功能，我因為比較喜歡ckeditor的界面而選擇了它。雖然有跟ckeditor配合良好的ckfinder，不過這個東東的功能太復(fù)雜，簡單看了下ckedtior的文檔，發(fā)現(xiàn)這個功能還是可以自己實現(xiàn)而不用借助ckfinder的。

下面代碼雖然基于yii framework的，但是用其他框架或者語言思路卻是完全一樣的，有需要的童鞋可以參考一下。

首先要讓ckeditor出現(xiàn)圖片上傳的功能，需要配置編輯器的filebrowserimageuploadurl屬性：

代碼如下:

ckeditor.replace( 'editor1',

    {

        filebrowseruploadurl : '/uploader/upload.php',

        filebrowserimageuploadurl : '/uploader/upload.php?type=images'

    });

然后在對應(yīng)的url上實現(xiàn)圖片上傳的功能，并向ckeditor返回特定格式的html代碼，ckeditor就能正常預(yù)覽并插入圖片了。

下面只截取控制器的部分代碼，controller部分我是這樣實現(xiàn)的：

代碼如下:

/**

 * 保存上傳的圖片

 *

 * @return string javascript code

 * @author lfyzjck

 **/

public function actionimg($type, $ckeditor, $ckeditorfuncnum, $langcode = 'zh-cn')

{

 if(empty($ckeditorfuncnum) || $type != 'images'){

  $this->mkhtml($ckeditorfuncnum,'','錯誤的函數(shù)調(diào)用');

 }

 if(isset($_files['upload'])){

  //獲取關(guān)于圖片上傳配置

  $options = options::model()->findbypk(1);

  $form = new uploadform('image',$options);

  $form->upload = cuploadedfile::getinstancebyname('upload');

  if($form->validate()){

  //文件名：時間+源文件名

   $target_filename = date('ymd-hm',time()).$form->upload->getname();

   $path = yii::app()->basepath.'/../uploads/'.$target_filename;   //圖片保存路徑

   $form->upload->saveas($path);

   $this->mkhtml($ckeditorfuncnum,yii::app()->baseurl.'/uploads/'.$target_filename, 上傳成功);

  }

  else{

   $this->mkhtml($ckeditorfuncnum,'',$form->geterror('upload'));

  }

 }

}

/**

 * 返回ckeditor的提示信息

 *

 * @return void

 * @author lfyzjck

 **/

private function mkhtml($fn, $fileurl, $message) 

{

 $str = '';

 exit($str);

}

需要特別說明的mkhtml函數(shù)，他會調(diào)用ckeditor的函數(shù)產(chǎn)生提示信息。上傳成功的時候?qū)D片鏈接返回，ckeditor會根據(jù)url生成圖片預(yù)覽。

然后是uploadform的代碼，這里會驗證圖片的格式和大小是否符合要求。

代碼如下:

class uploadform extends cformmodel

{

 public $upload;

 private $options;

 private $type;

 public function __construct($type, $options){

  $this->options = $options;

  $this->type = $type;

 }

 /**

  * declares the validation rules.

  * the rules state that username and password are required,

  * and password needs to be authenticated.

  */

 public function rules()

 {

  return array(

   array('upload', 'file', 

    'types' => $this->options->getattribute(allow_.$this->type._type), 

    'maxsize' => 1024 * (int)$this->options->getattribute(allow_.$this->type._maxsize),

    'toolarge'=>'文件大小超過限制',

   ),

  );

 }

}

更多信息請查看IT技術(shù)專欄