天天看点

****CI和UEditor集成CI框架整合UEditor编辑器上传功能CI框架+Umeditor上传图片配置信息

百度UEditor是一款比较常用编辑器 

下载地址: 

<a href="http://ueditor.baidu.com/website/download.html" target="_blank">http://ueditor.baidu.com/website/download.html</a>

1.在assets目录下建立ueditor文件夹,把下载的源码放入该文件夹 

2.在需要使用ueditor的文件内引入ueditor相关文件 

上代码:

最近项目中要使用到富文本编辑器,选用了功能强大的UEditor,接下来就来讲讲UEditor编辑器的上传功能整合。

本文UEditor版本:ueditor1_4_3_utf8_php版本

第一步:部署编辑器

HTML代码:

JavaScript代码:

****CI和UEditor集成CI框架整合UEditor编辑器上传功能CI框架+Umeditor上传图片配置信息
****CI和UEditor集成CI框架整合UEditor编辑器上传功能CI框架+Umeditor上传图片配置信息

 第二步:服务端整合

前端代码部署完,现在页面已经可以正常显示百度编辑器的编辑框了,接下来就是本文要介绍的上传功能的整合。

首先在CI框架的controllers目录下创建名为ueditorup的.php文件并在此文件创建同名的类(UeditorUp),百度编辑器的所有上传功能都将在这个类里实现(图片、涂鸦、视频,附件上传)。

下面代码中的上传处理类MyUploader 就是UEditor中的Uploader.class.php文件,这里为了与前端编辑器上传功能完美衔接使用了UEditor自带的Uploader.class.php文件而没有使用CI框架的上传处理功能(本人对UEditor不是很熟悉),不过为了让上传更加安全,增加了上传文件的MIME类型判断,判断代码就直接来自CI框架的上传类,配置都放在mimeconfig.php配置文件中。

而配置文件uploadconfig则是UEditor编辑器的config.json文件配置,只是把json格式改成了CI的数组格式。

UEditor编辑器个服务器交互都是通过统一请求地址进行访问的,同时会通过GET方法提交action的值,服务器端则通过action的值判断具体的处理方法。

****CI和UEditor集成CI框架整合UEditor编辑器上传功能CI框架+Umeditor上传图片配置信息
****CI和UEditor集成CI框架整合UEditor编辑器上传功能CI框架+Umeditor上传图片配置信息

下面是修改后的MyUploader上传类的文件后缀获取方法。

****CI和UEditor集成CI框架整合UEditor编辑器上传功能CI框架+Umeditor上传图片配置信息
****CI和UEditor集成CI框架整合UEditor编辑器上传功能CI框架+Umeditor上传图片配置信息

到此CI框架整合UEditor编辑器就算完成了。

*注意:在整合上传功能的时候,要开启文件保存目录的读写权限。

 转:

http://www.cnblogs.com/wenxiong/p/3930013.html

参考:

(注:UMeditor是Ueditor的迷你版)

Umeditor提供了一个上传文件通用的类Uploader.class.php, 首先将Uploader.class.php类放入CI框架的libraries目录下更名为Myuploader.php然后将该类提供的构造方法替换掉

本来的构造方法:

/** 

    * 构造函数 

    * @param string $fileField 表单名称 

    * @param array $config 配置项 

    * @param bool $base64 是否解析base64编码,可省略。若开启,则$fileField代表的是base64编码的字符串表单名 

    */  

   public function __construct($fileField, $config, $type = "upload")  

   {  

       $this-&gt;fileField = $fileField;  

       $this-&gt;config = $config;  

       $this-&gt;type = $type;  

       if ($type == "remote") {  

           $this-&gt;saveRemote();  

       } else if($type == "base64") {  

           $this-&gt;upBase64();  

       } else {  

           $this-&gt;upFile();  

       }  

       $this-&gt;stateMap['ERROR_TYPE_NOT_ALLOWED'] = iconv('unicode', 'utf-8', $this-&gt;stateMap['ERROR_TYPE_NOT_ALLOWED']);  

   }  

替换成:

     * 构造函数 

     * @param string $fileField 表单名称 

     * @param array $config  配置项 

     * @param bool $base64  是否解析base64编码,可省略。若开启,则$fileField代表的是base64编码的字符串表单名 

     */  

    public function __construct()  

    {  

    }  

    public function Init($fileField , $config , $base64 = false)  

        /*var_dump($fileField); 

        var_dump($config);exit;*/  

        $this-&gt;fileField = $fileField;  

        $this-&gt;config = $config;  

        $this-&gt;stateInfo = $this-&gt;stateMap[ 0 ];  

        $this-&gt;upFile( $base64 );  

然后创建上传文件的方法:

/*Ueditor_model*/  

class Ueditor_model extends CI_Model {  

        function __construct() {  

            parent::__construct();  

            $this-&gt;load-&gt;library("myuploader");  

        }  

        function upload_image(){  

            $dir = 'source/uploads/images/ueditor_images/';  

            if (!is_dir($dir)) {  

                $res = mkdir($dir, 0755, true);  

            }  

            //上传配置  

            $config = array(  

                "savePath" =&gt; $dir ,             //存储文件夹  

                "maxSize" =&gt; 512,                   //允许的文件最大尺寸,单位KB  

                "allowFiles" =&gt; array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允许的文件格式  

            );  

            $config[ "savePath" ] = $dir;  

            $this-&gt;myuploader-&gt;init("upfile", $config, $base=false);  

            $info = $this-&gt;myuploader-&gt;getFileInfo();  

            return $info;  

/*controller*/  

class Uploads_files extends CI_Controller {   

    function goods_edition_upload_img() {  

        $info = $this -&gt; ueditor_model -&gt; upload_image();  

        echo json_encode($info);  

}  

最后一步到umeditor.config.js中修改上传文件方法

    * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。 

   window.UMEDITOR_CONFIG = {  

       //为编辑器实例添加一个路径,这个不能被注释  

       UMEDITOR_HOME_URL : URL  

       //图片上传配置区  

       ,imageUrl:URL + ""             &lt;span style="white-space:pre"&gt;          &lt;/span&gt;//图片上传提交地址  

       ,imagePath:URL + ""                     &lt;span style="white-space:pre"&gt; &lt;/span&gt;//图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置  

       ,imageFieldName:"upfile"                   &lt;span style="white-space:pre"&gt;  &lt;/span&gt;//图片数据的key,若此处修改,需要在后台对应文件修改对应参数  

转:http://blog.csdn.net/demon3182/article/details/41915283

如何联系我:【万里虎】www.bravetiger.cn

【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起)

【博客】http://www.cnblogs.com/kenshinobiy/