提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

Yii结合CKEditor实现图片上传功能

上传 实现 功能 图片 结合 yii ckeditor
2023-06-13 09:15:28 时间

这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能，我因为比较喜欢CKEditor的界面而选择了它。虽然有跟CKEditor配合良好的CKFinder，不过这个东东的功能太复杂，简单看了下CKEdtior的文档，发现这个功能还是可以自己实现而不用借助CKFinder的。

下面代码虽然基于YiiFramework的，但是用其他框架或者语言思路却是完全一样的，有需要的童鞋可以参考一下。

首先要让CkEditor出现图片上传的功能，需要配置编辑器的filebrowserImageUploadUrl属性：

复制代码代码如下:

CKEDITOR.replace("editor1",
   {
       filebrowserUploadUrl:"/uploader/upload.php",
       filebrowserImageUploadUrl:"/uploader/upload.php?type=Images"
   });

然后在对应的URL上实现图片上传的功能，并向CKEditor返回特定格式的HTML代码，CKEditor就能正常预览并插入图片了。
下面只截取控制器的部分代码，Controller部分我是这样实现的：
复制代码代码如下:

/**
 *保存上传的图片
 *
 *@returnstringjavascriptcode
 *@authorlfyzjck
 **/
publicfunctionactionImg($type,$CKEditor,$CKEditorFuncNum,$langCode="zh-cn")
{
 if(empty($CKEditorFuncNum)||$type!="Images"){
  $this->mkhtml($CKEditorFuncNum,"","错误的函数调用");
 }
 if(isset($_FILES["upload"])){
  //获取关于图片上传配置
  $options=Options::model()->findByPk(1);
  $form=newUploadForm("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的提示信息
 *
 *@returnvoid
 *@authorlfyzjck
 **/
privatefunctionmkhtml($fn,$fileurl,$message)
{
 $str="";
 exit($str);
}

需要特别说明的mkhtml函数，他会调用CKEditor的函数产生提示信息。上传成功的时候将图片链接返回，CKEditor会根据URL生成图片预览。

然后是UploadForm的代码，这里会验证图片的格式和大小是否符合要求。

复制代码代码如下:
classUploadFormextendsCFormModel
{
 public$upload;

 private$options;
 private$type;

 publicfunction__construct($type,$options){
  $this->options=$options;
  $this->type=$type;
 }
 /**
 *Declaresthevalidationrules.
 *Therulesstatethatusernameandpasswordarerequired,
 *andpasswordneedstobeauthenticated.
 */
 publicfunctionrules()
 {
  returnarray(
   array("upload","file",
    "types"=>$this->options->getAttribute("allow_".$this->type."_type"),
    "maxSize"=>1024*(int)$this->options->getAttribute("allow_".$this->type."_maxsize"),
    "tooLarge"=>"文件大小超过限制",
   ),
  );
 }
}

相关文章