如何在Yii中使用CKEditor實(shí)現(xiàn)一個(gè)圖片上傳功能

如何在Yii中使用CKEditor實(shí)現(xiàn)一個(gè)圖片上傳功能？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

首先要讓CkEditor出現(xiàn)圖片上傳的功能，需要配置編輯器的filebrowserImageUploadUrl屬性：

復(fù)制代碼 代碼如下:

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)的：

復(fù)制代碼 代碼如下:

/**
 * 保存上傳的圖片
 *
 * @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.'/../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);
}

需要特別說(shuō)明的mkhtml函數(shù)，他會(huì)調(diào)用CKEditor的函數(shù)產(chǎn)生提示信息。上傳成功的時(shí)候?qū)D片鏈接返回，CKEditor會(huì)根據(jù)URL生成圖片預(yù)覽。

然后是UploadForm的代碼，這里會(huì)驗(yàn)證圖片的格式和大小是否符合要求。

復(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'=>'文件大小超過(guò)限制',
   ),
  );
 }
}

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。