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

这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能，我因为比较喜欢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'=>'文件大小超过限制',
   ),
  );
 }
}

赞 (0)

相关推荐

  • yii2高级应用之自定义组件实现全局使用图片上传功能的方法

    本文讲述了yii2高级应用之自定义组件实现全局使用图片上传功能的方法.分享给大家供大家参考,具体如下: 此例为yii2高组应用,这里只提供一个简单的事例 在yii2中,在使用到上传图片时有自带的一个上传图片类,但不太好用. 其中有一种方式,把自己写的一个上传图片类文件,注册成一个组件,在全局中使用.(我记得我在里面有写过一篇小物件的使用) 这里,我只作一个简单的自定义组件介绍 1.在backend(或frontend)定义一个 upload.php(注意路径: backend/component

  • yii实现图片上传及缩略图生成的方法

    本文实例讲述了利用yii框架来实现图片上传功能并在上传成功之后自动生成缩略图的方法,分享给大家供大家参考.具体实现方法如下: Action文件: 复制代码 代码如下: <?php /**  * TestController.php  * Created on: 2014-1-26 12:59:36 by Outsider  */ class TestController extends CController {       /**      * 缩略图片生成      * @ path 图片路

  • Yii2实现ajax上传图片插件用法

    本文实例讲述了Yii2实现ajax上传图片插件用法.分享给大家供大家参考,具体如下: 这里需要先下载 mdmsoft/yii2-upload-file.插件. 代码如下: public function actionCreate() { $model = new DynamicModel([ 'nama', 'file_id' ]); // behavior untuk upload file $model->attachBehavior('upload', [ 'class' => 'mdm

  • Yii框架上传图片用法总结

    本文实例讲述了Yii框架上传图片用法.分享给大家供大家参考,具体如下: Yii 提供了 CUploadedFile 来上传文件,比如图片,或者文档. 官方关于这个类的介绍 : CUploadedFile represents the information for an uploaded file. Call getInstance to retrieve the instance of an uploaded file, and then use saveAs to save it on th

  • Yii框架实现图片上传的方法详解

    本文实例讲述了Yii框架实现图片上传的方法.分享给大家供大家参考,具体如下: 今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考. Model: <?php class Upload extends CActiveRecord { public $image; public static function model($className = __CLASS__) { return $className; } public functio

  • yii使用activeFileField控件实现上传文件与图片的方法

    本文实例讲述了yii使用activeFileField控件实现上传文件与图片的方法.分享给大家供大家参考,具体如下: yii框架提供了activeFileField控件来完成上传文件(当然也包括了上传图片)的操作,下面介绍yii的activeFileField使用方法. 1.函数原型: 复制代码 代码如下: public static string activeFileField(CModel $model, string $attribute, array $htmlOptions=array

  • yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法

    我们接下来就来聊聊Yii2框架是如何整合百度编辑器umeditor的. umeditor是啥,我只听过ueditor,你这umeditor是不是盗版的东东喃?umeditor呢,说白了就是mini版的ueditor,按照百度官方说法,其实就是编辑器中的"短软小",但是功能俱全.咳咳,咱们回归正题. 首先勒,咱们先去官网下载一份mini版的ueditor umeditor,注意哦,是um editor. 下载下来解压放到项目根目录下面的 /css目录下 命名为umeditor,具体位置各

  • Yii+upload实现AJAX上传图片的方法

    本文实例讲述了Yii+upload实现AJAX上传图片的方法.分享给大家供大家参考,具体如下: 控制器代码: /** * get ajax uploaded files. */ public function actionGetAjax(){ $model=new Attachment();//加载附件模型 $tmpFile = CUploadedFile::getInstanceByName('image');//读取图像上传域,并使用系统上传组件上传 $Directroy = Yii::ap

  • yii2利用自带UploadedFile实现上传图片的示例

    本人搜索了很多关于yii2利用自带UploadedFile实现上传图片介绍,下面我来记录一下. 创建一个 models/UploadForm.php: namespace app\models; use yii\base\Model; use yii\web\UploadedFile; /** * UploadForm is the model behind the upload form. */ class UploadForm extends Model { /** * @var Uploa

  • YII中Ueditor富文本编辑器文件和图片上传的配置图文教程

    YII中Ueditor富文本编辑器文件和图片上传的配置图文教程

    将Ueditor集成到YII框架中后,参照editor_config.js中的toolbars中的内容,更改options中标签可以给编辑器添加想要的功能: 因此要想添加文件和图片上传功能,应该加入以下两个标签: 文本编辑器中便出现了对应的两个选项: 但是点击上传图片按钮后发现,无法正常进行图片上传,文件上传也是失败的,问题都是Flash Player需要升级, 因此在火狐浏览器中安装对应的flash player组件,选择其中一个工作: 此时,文件上传和图片上传功能就能正常使用了: 上传路径的

  • yii上传文件或图片实例

    1.test.php 复制代码 代码如下: <body><form action="<?php echo $this->createUrl('/test/upload/');?>" method="post" enctype="multipart/form-data"><input type="file" name="file"/><input t

随机推荐