這幾天做的一個項目中需要在所見即所得編輯器中實現(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ù)專欄