【转载】CI框架集成CkEditor编辑器+图片上传功能

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指定图片上传处理文件,在你的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);
                 }

         }

}


原文链接:https://blog.csdn.net/ricky_sky/article/details/41346303 

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。