這幾天做的一個項目中需要在所見即所得編輯器中實現(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 lfyzjckhtml' target='_blank'>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 lfyzjckprivate 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 = 文件大小超過限制 ,}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP ！

相關(guān)推薦：

關(guān)于Yii Framework框架獲取分類下面的所有子類的方法

Yii2如何使用Bootbox插件實現(xiàn)自定義彈窗

使用Yii2 rbac權(quán)限控制菜單menu

以上就是Yii和CKEditor實現(xiàn)圖片上傳的功能的詳細內(nèi)容，PHP教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。