用户
 找回密码
 入住 CI 中国社区
搜索
查看: 6219|回复: 2
收起左侧

[Others] CI里集成CKEditor编缉器,并加上自定议上传图片处理

[复制链接]
发表于 2012-7-14 15:39:20 | 显示全部楼层 |阅读模式
1.先下载CKEditor编缉器(官网:http://ckeditor.com/download)。
2.把解压后的CKEditor复制到CI的根目录下。
3.把ckeditor目录下的ckeditor_php5.php文件复制到CI的application/libraries/下并重命名为ckeditor.php。
4.这些准备工作做完后就可以在CI的控制器中调用CKEditor编缉器了,如下:
###测试ckeditor###
function ckeditor(){
$this->load->helper('url');

                       ###载入ckeditor##
$this->load->library('ckeditor');

$this->ckeditor->basePath=base_url().'ckeditor/';  ###配置CKEditor所在的目录
                $this->ckeditor->returnOutput=true;

$contentAuto='这里默认显示的内容';


         ###应该放到视图里显示的,测试所在直接显示
                 echo $this->ckeditor->editor('contents',$contentAuto);
          }
这样就可测试到CKEditor没问题了,但是还没有集成上传图片功能,
从而有两种选择:
                   一,用CKEditor+CKFinder完成图片上传。
                   二,自己根据CKEditor接口用PHP写个处理上传图片扩展。
综合分析:前一种方法非常省力,但是不能算定义重命名上传的图片。而且对我来说最重要的一点点是在框架CodeIgniter中使用不了。后一各虽然麻烦,但是能完全定制上传处理图片!参考网上的资料,终于在花了我两天时间下,为CKEditor加上自定义上传图片功能,而且能完全移值到CodeIgniter下使用!!

   首先为CKEditor指定图片上传处理文件,在你的CKEditor文件夹下的config.js文件里添加如下代码:

CKEDITOR.editorConfig = function( config )
{
   config.filebrowserImageUploadUrl ='http://localhost/CI/index.php/ckeditorUpload/upload/img';
   config.filebrowserFlashUploadUrl = 'http://localhost/CI/index.php/ckeditorUpload/upload/flash';
};

特别说明,CKEditor中传来的文件是$_FILES['upload']看到这里,相信各位就可以自己为CKEditor写个处理上传
再给出CodeIgniter下的处理文件给大家参考:<?php
/***
* -------------------------------------------------------------------------------------------------------------------
* ###ckeditorUpload.php###
* ###测试ckeditor集成自定义上传处理测试###
* ###问题:没有判断真实的文件类型而分类文件夹 ,  中文文件名乱码    ###
* ###Dirt→(尘灰)    QQ:287074118   2012-07-14###
* -------------------------------------------------------------------------------------------------------------------
* ***/

class CkeditorUpload extends CI_Controller{

        ###测试输出ckeditor编缉器###
        function index(){
                $this->load->helper('url');

                ###载入ckeditor###
                $this->load->library('ckeditor');
                $this->ckeditor->basePath=base_url().'ckeditor/';  ###配置CKEditor所在的目录
                $this->ckeditor->returnOutput=true;

                /***
                 ###载入ckfinder###
                 $this->load->library('ckfinder');
                 $this->ckfinder->basePath=base_url().'ckfinder/';  ###ckfinder目录所在

                 $this->ckfinder->SetupCKEditorObject($this->ckeditor);   ###让ckeditor和ckfinder结合起来
                 ***/

                $contentAuto='这里CKEditor默认显示的内容';

                echo $this->ckeditor->editor('contents',$contentAuto);  ###应该放到视图里显示的,测试所在直接显示

        }

        ###添加ckeditor上传图片自定义###
        function upload($type=''){
                /***
                *ckedit上传扩展
                *调用JS回调<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction($fn,$file,$message);</script>
                * $fn=2,$file不为空,时为成功,$message是提示消息
                ****/
                $this->load->helper('url');

                $config['upload_path']='./uploads/'.$type;        ###配置上传路径
                $config['allowed_types']='gif|jpg|png|swf';       ###允许上传的文件类型
                $config['max_size']='3000';                       ###允许上传的文件大小
                ###$config['encrypt_name']=TRUE;   ###上传文件随机重命名

                $this->load->library('upload',$config);     ###加载上传类,并初始化配置

                $fn=$this->input->get('CKEditorFuncNum');   ###接收回调参数###

                ###判断是否需要建立目录###
                if(!is_dir($config['upload_path'])){
                        if(!mkdir($config['upload_path'],0777,TRUE)){
                                $message='是否有权限追寻目录上传';
                                $str="<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction($fn,\"\",'$message');</script>";
                                exit($str);
                        }
                }

        ###判断是否上传成功###
                if(!$this->upload->do_upload('upload')){
                        ###做回调显示失败处理
                        $message='是否有权限上传';
                        $str="<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction($fn,\"\",'$message');</script>";
                        exit($str);
                }else{
                        $message='Upload successful(上传成功)';

                        $updata=$this->upload->data(); ###返回上传文件的相关信息

                        ###这里手动处理重命名文件,原文件名+当前时间###
                        $rename=$updata['raw_name'].date("_Y_m_d_h").$updata['file_ext'];
                        $renamepath=$updata['file_path'].$rename;

                        ###重命名文件###
                        if(!rename($updata['full_path'],$renamepath )){
                                ###做回调显示失败处理
                                $message='重命名失败';
                                $str="<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction($fn,\"\",'$message');</script>";
                                exit($str);
                        }


                        ###如需要可以做文件信息写入数据库处理###

                        ###$filename=base_url().'uploads/'.$rename; ###当前上传的文件,也可以../uploads/6_2012_07_13_11.jpg
                        $filename='.'.$config['upload_path'].'/'.$rename;

                        ###回调###
                        $str="<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction($fn,'$filename','$message');</script>";  ###关键$filename这里记得加上'',不然会出错
                        exit($str);
                }

        }


}


?>



发表于 2012-7-29 12:31:35 | 显示全部楼层
给力,顶一个
发表于 2012-8-29 00:04:00 | 显示全部楼层
很好非常不错

本版积分规则