這幾天做的一個項目中需要在所見即所得編輯器中實現圖片上傳的功能，我因為比較喜歡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 lfyzjckhtml' target='_blank'>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 lfyzjckprivate 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 = 文件大小超過限制 ,}

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

相關推薦：

關于Yii Framework框架獲取分類下面的所有子類的方法

Yii2如何使用Bootbox插件實現自定義彈窗

使用Yii2 rbac權限控制菜單menu

以上就是Yii和CKEditor實現圖片上傳的功能的詳細內容，PHP教程

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