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

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

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

代碼如下:

ckeditor.replace( 'editor1',

{

filebrowseruploadurl : '/uploader/upload.php',

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

});

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

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

代碼如下:

/**

* 保存上傳的圖片

*

* @return string javascript code

* @author lfyzjck

**/

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

{

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

$this->mkhtml($ckeditorfuncnum,'','錯誤的函數調用');

}

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

//獲取關于圖片上傳配置

$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函數，他會調用ckeditor的函數產生提示信息。上傳成功的時候將圖片鏈接返回，ckeditor會根據url生成圖片預覽。

然后是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技術專欄