|
|
這幾天做的一個項目中需要在所見即所得編輯器中實現(xiàn)圖片上傳的功能，我因為比較喜歡CKEditor的界面而選擇了它。雖然有跟CKEditor配合良好的CKFinder，不過這個東東的功能太復(fù)雜，簡單看了下CKEdtior的文檔，發(fā)現(xiàn)這個功能還是可以自己實現(xiàn)而不用借助CKFinder的。
下面代碼雖然基于Yii Framework的，但是用其他框架或者語言思路卻是完全一樣的，有需要的童鞋可以參考一下。
首先要讓CkEditor出現(xiàn)圖片上傳的功能，需要配置編輯器的filebrowserImageUploadUrl屬性：
復(fù)制代碼 代碼如下:
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)的：
復(fù)制代碼 代碼如下:
/**
* 保存上傳的圖片
*
* @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的代碼，這里會驗證圖片的格式和大小是否符合要求。
復(fù)制代碼 代碼如下:
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'=>'文件大小超過限制',
),
);
}
}
php技術(shù)：Yii結(jié)合CKEditor實現(xiàn)圖片上傳功能，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
