程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> Yii結合CKEditor實現圖片上傳功能

Yii結合CKEditor實現圖片上傳功能

編輯:關於PHP編程

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

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved