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 header Content-Type类型小结
Jul 03 PHP
PHP中其实也可以用方法链
Nov 10 PHP
PHP APC的安装与使用详解
Jun 13 PHP
php读取文件内容的几种方法详解
Jun 26 PHP
php jq jquery getJSON跨域提交数据完整版
Sep 13 PHP
使用php批量删除数据库下所有前缀为prefix_的表
Jun 09 PHP
PHP可变变量学习小结
Nov 29 PHP
thinkphp微信开发(消息加密解密)
Dec 02 PHP
CodeIgniter分页类pagination使用方法示例
Mar 28 PHP
PHP利用DWZ.CN服务生成短网址
Aug 11 PHP
php设计模式之观察者模式定义与用法经典示例
Sep 19 PHP
浅谈PHP array_search 和 in_array 函数效率问题
Oct 15 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
正则表达式语法
2006/10/09 Javascript
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
解析php入库和出库
2013/06/25 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
JavaScript中的作用域链和闭包
2012/06/30 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python书单 不将就
2017/07/11 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python实现石头剪刀布游戏
2021/01/20 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
自我评价正确写法范文
2013/12/10 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
经典爱情感言
2015/08/03 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
MySQL数据库表约束讲解
2022/06/21 MySQL