這幾天做的一個(gè)項(xiàng)目中需要在所見(jiàn)即所得編輯器中實(shí)現(xiàn)圖片上傳的功能，我因?yàn)楸容^喜歡ckeditor的界面而選擇了它。雖然有跟ckeditor配合良好的ckfinder，不過(guò)這個(gè)東東的功能太復(fù)雜，簡(jiǎn)單看了下ckedtior的文檔，發(fā)現(xiàn)這個(gè)功能還是可以自己實(shí)現(xiàn)而不用借助ckfinder的。
下面代碼雖然基于yii framework的，但是用其他框架或者語(yǔ)言思路卻是完全一樣的，有需要的童鞋可以參考一下。
首先要讓ckeditor出現(xiàn)圖片上傳的功能，需要配置編輯器的filebrowserimageuploadurl屬性：
代碼如下:
ckeditor.replace( 'editor1',
{
filebrowseruploadurl : '/uploader/upload.php',
filebrowserimageuploadurl : '/uploader/upload.php?type=images'
});
然后在對(duì)應(yīng)的url上實(shí)現(xiàn)圖片上傳的功能，并向ckeditor返回特定格式的html代碼，ckeditor就能正常預(yù)覽并插入圖片了。
下面只截取控制器的部分代碼，controller部分我是這樣實(shí)現(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,'','錯(cuò)誤的函數(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()){
//文件名：時(shí)間+源文件名
$target_filename = date('ymd-hm',time()).$form->upload->getname();
$path = yii::app()->basepath.'/..http://pic02.newdu.com/uploads/'.$target_filename; //圖片保存路徑
$form->upload->saveas($path);
$this->mkhtml($ckeditorfuncnum,yii::app()->baseurl.'http://pic02.newdu.com/uploads/'.$target_filename, 上傳成功);
}
else{
$this->mkhtml($ckeditorfuncnum,'',$form->geterror('upload'));
}
}
}
/**
* 返回ckeditor的提示信息
*
* @return void
* @author lfyzjck
**/
private function mkhtml($fn, $fileurl, $message)
{
$str = '';
exit($str);
}
需要特別說(shuō)明的mkhtml函數(shù)，他會(huì)調(diào)用ckeditor的函數(shù)產(chǎn)生提示信息。上傳成功的時(shí)候?qū)D片鏈接返回，ckeditor會(huì)根據(jù)url生成圖片預(yù)覽。
然后是uploadform的代碼，這里會(huì)驗(yàn)證圖片的格式和大小是否符合要求。
代碼如下:
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'=>'文件大小超過(guò)限制',
),
);
}
}