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

   2015-10-12 0
核心提示:这篇文章主要介绍了Yii结合CKEditor实现图片上传功能,Yii是大名鼎鼎的PHP开发框架,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举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Yii 框架学习:如何复制一个Ruby on Rails。
    Yii 框架学习:如何复制一个Ruby on Rails。
     早上在ruby-china发了个帖子,询问“现今PHP的框架中最接近RAILS的是什么?”大部分答曰"Yii”。所以晚上回来就来学下这个框架看看。 Yii 是一个基于组件、纯OOP的、用于开发大型 Web 应用的高性能 PHP 框架。 下载回来的软件包解压后结构如下:CHANGELOG
    02-09
  • yii 隐藏index.php
        首先,开启apache的rewrite模块    去掉rewrite前的#,如下所示    LoadModule rewrite_module modules/mod_rewrite.so     接着,在yii的index.php同级目录建立.htaccess文件,内容如下    IfModule mod_rewrite.c       Optio
    02-09
  • php Yii2框架创建定时任务方法详解
    目录简单的定时任务脚步文件传递参数设置参数别名在Linux配置crontab在我们项目开发中,需要使用定时任务来完成批处理业务,下面通过Yii2框架来实现定时任务Yii2框架定时任务代码统一放在 ./console 目录下简单的定时任务脚步文件首先在console/controller目
  • yii2的数据库层设计
    Yii2在M层的抽象做的很经典,值得分析理解。QueryBuilder不同的数据库引擎(mysql,oracle…)执行相同的SQL,可能语法有一些细微的差异,但是SQL整体语法差别不大,所以会定义一个QueryBuilder基类,它提供一般通用的SQL生成方法,具体每个数据库引擎继承Quer
    02-05 SQLYii
  • 码云推荐 | 基于Yii2的后台开源骨架 openadm-yi
    OpenAdmOpenAdm是一个基于Yii2的后台开源骨架,集成了用户和插件系统,使用主题功能,默认使用AdminLTE2的模板的主题,可以非常方便的开发新的功能。Demo地址:http://yii2.openadm.com后台账号: admin后台密码: admin仓库地址:OSC:https://git.oschina.net/xiong
    02-05 Yii开源
  • Yii2配置多语言
    我的YII2版本是2.0.7, 设置多语言时和其他教程有不同的地方, 所以整理如下1. 在一个controller里面写一个调用i18n的语句, 比如actionIndexecho \Yii::t('app', 'whatisthis');现在进入这个页面, 页面输出whatisthis2. 手动创建一个文件夹messages来存放多语言
    02-05 Yii
  • Yii2 的问题解决方案
    Yii2 的问题解决方案
    yii2 Class 'app\controllers\AccessControl' not found一般是命名空间问题, 写成\yii\filters\AccessControl::className(),yii2想要新增第三方vendor, 修改composer.json,require-dev: {yiisoft/yii2-codeception: *,yiisoft/yii2-debug: *,yiisoft/yii2-gii
    02-05 Yii
  • Yii 2.0.11.1 发布,高性能 PHP 框架
    Yii 2.0.11.1 发布了。Yii是一个高性能的PHP5的web应用程序开发框架。通过一个简单的命令行工具 yiic 可以快速创建一个web应用程序的代码框架,开发者可以在生成的代码框架基础上添加业务逻辑,以快速完成应用程序的开发。 更新内容: Bug #11502: Fixed yii\
    02-05 Yii高性能
  • 码云推荐 | 基于 yii2 的快速配置 api 服务 yii2-fast-api
    码云推荐 | 基于 yii2 的快速配置 api 服务 yii
    yii2-fast-api yii2-fast-api是一个Yii2框架的扩展,用于配置完善Yii2,以实现api的快速开发。此扩展默认的场景是APP的后端接口开发,因此偏向于实用主义,并未完全采用restfull的标准,方便前端开发处理接口数据以及各种异常。Installation 使用 Composer 安
    02-05 YiiAPI
  • 简述Yii2里的AOP思想
    AOP是什么在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。AOP解决什么将日志记录,性能统计,安全控制,事务处理,异常处理等代码从业务逻辑代码中划分出来,通过
    12-23 AOPYii
点击排行