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


Posted in PHP onJune 13, 2014

这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能,我因为比较喜欢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'=>'文件大小超过限制',
   ),
  );
 }
}
PHP 相关文章推荐
php分页示例代码
Mar 19 PHP
坏狼php学习 计数器实例代码
Jun 15 PHP
linux下 C语言对 php 扩展
Dec 14 PHP
PHP var_dump遍历对象属性的函数与应用代码
Jun 04 PHP
修改destoon会员公司的伪静态中的com目录的方法
Aug 21 PHP
php使用cookie显示用户上次访问网站日期的方法
Jan 26 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
Mar 03 PHP
PHP使用递归算法无限遍历数组示例
Jan 13 PHP
ThinkPHP5框架缓存查询操作分析
May 30 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
Mar 18 PHP
php写入mysql中文乱码的实例解决方法
Sep 17 PHP
laravel 实现登陆后返回登陆前的页面方法
Oct 03 PHP
在Yii框架中使用PHP模板引擎Twig的例子
Jun 13 #PHP
ThinkPHP中U方法的使用浅析
Jun 13 #PHP
PHP实现单例模式最安全的做法
Jun 13 #PHP
PHP5.5和之前的版本empty函数的不同之处
Jun 13 #PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
Jun 13 #PHP
PHP中多维数组的foreach遍历示例
Jun 13 #PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
Jun 13 #PHP
You might like
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP实现八皇后算法
2019/05/06 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
Node 代理访问的实现
2019/09/19 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
Python中动态创建类实例的方法
2017/03/24 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
生物制药自我鉴定
2014/01/25 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
受伤赔偿协议书
2014/09/24 职场文书
辞职信如何写
2015/02/27 职场文书
2015年信访工作总结
2015/04/07 职场文书
张思德观后感
2015/06/09 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android