百度富文本编辑器ueditor上传文件到bcs中

（不知为何，代码的排版总是不能自动对齐。有点纠结，各位将就看着）

近期在做一个个人博客，用到了百度的富文本编辑器ueditor。博客是架在了bae中的。在测试的时候发现，上传的图片有时候不会或者是间接性地不会显现出来，特别诡异的是，我用ie内核的浏览器（比如360、ie、搜狗等）访问时与chrome和ff访问的结果不一样，即：有些图片在ie内核浏览器能够显示出来，在chrome或者ff中不能显示，反过来，有些图片能够在chrome或者ff中显示，但是在ie内核浏览器中不能显示。纠结于此，本人顾不得马上就要考试了，不断的到网上找资料，修改ueditor源代码，弄了一天，终于搞定了。现在把过程记录下，供大家参考，免得大家走弯路。

原来bae只提供代码部署，虽然也提供本地文件写入，但如果使用UEditor内的上传方式，图片只能保证暂时可以访问。过一段时间后就不一定能访问【1】。网上有人提出，可以将上传的文件存储到百度云存储（bcs）中，但给出的解决步骤差强人意，或者不全，或者不对，或者是针对非常老版的ueditor。本人拟详细记录如何实现通过ueditor上传文件到bcs中的步骤，所用到的ueditor是当前最新的版本：ueditor1_3_5，编程语言是php，搭建在百度开放云平台2.0中。

使用百度云存储服务进行开发的具体步骤如下【2】：

1. 注册百度账号，并成为百度开发者。这一步不详谈了，各位应该都知道。

2. #创建应用并获取密钥对（ak&sk）。进入管理中心-》应用管理-》服务管理-》我的密钥，若不存在密钥，则创建密钥对，若已经拥有密钥对了，则直接可用。

3. #创建bucket。进入管理中心-》云平台管理-》云存储-》我的bucket，点击创建bucket按钮，输入bucket名即可。本人的bucket名为：kangry-family

4. #上传文件。这一步仅仅只是做实验，便于大家对bucket有个了解。可以选择进入一个bucket，然后上传本地文件即可。

5. #权限设置。改权限设置可在多个粒度设置。一是bucket级别。对bucket右键-》属性-》公开读；另一个是文件级别，对文件右键-》属性-》公开读。我们只需要在bucket级别把权限设置为公开读即可。

6.下载bcs_sdk_php，地址为http://developer.baidu.com/wiki/index.php?title=docs/cplat/stor/sdk，当前版本为1.2.2。解压到项目文件夹下。假设放在文件夹的路径为INC_PATH。

7.修改INC_PATH.'Baidu-BCS_SDK-PHP-1.2.2/conf.inc.php'文件，将第2步的其中一对公钥和私钥定义为常量。如下所示。

<?php
//AK 公钥
define ( 'BCS_AK', '你的公钥' );
//SK 私钥
define ( 'BCS_SK', '你的私钥' );
//superfile 每个object分片后缀
define ( 'BCS_SUPERFILE_POSTFIX', '_bcs_superfile_' );
//sdk superfile分片大小 ，单位 B（字节）
define ( 'BCS_SUPERFILE_SLICE_SIZE', 1024 * 1024 );

8.假设udeitor在JS_PATH目录下。对于上传文件、图片、涂鸦的修改。前面几个版本估计没有封装好，所以【1】中所提供的方法并不适用。而我用的这个版本对文件上传封装成了一个类。故我们只需要修改：JS_PATH.'ueditor1_3_5-utf8-php/php/Uploader.class.php'文件。修改第67行upFile($base64)的函数。从第103行开始，改成如下代码即可：

//$this->fullName = $this->getFolder() . '/' . $this->getName();
        $this->fullName = $this->getName();
        if ( $this->stateInfo == $this->stateMap[ 0 ] ) {
			/**
            if ( !move_uploaded_file( $file[ "tmp_name" ] , $this->fullName ) ) {
                $this->stateInfo = $this->getStateInfo( "MOVE" );
            }
			*/
			include_once(INC_PATH."Baidu-BCS_SDK-PHP-1.2.2/bcs.class.php"); //载入SDK
			$bucket = 'kangry-family'; //我已经在百度平台建好了这个bucket,就像创建目录一样
			$object = '/'.$this->fullName; //保存到百度云的文件名
			$fileUpload = $file[ "tmp_name" ]; //已经上传到我服务器的文件路径
			$baiduBCS = new BaiduBCS (); //创建百度云存储对象
			$response = $baiduBCS->get_bucket_acl( $bucket ); //选择指定的bucket,就像切换数据库,切换目录,创建bucket可以看百度SDK里的例子
			
			if ($response->isOK ()) { // 切换bucket成功
				$response = $baiduBCS->create_object ( $bucket, $object, $fileUpload ); //上传文件
				if (! $response->isOK ()) { //上传失败执行
					$this->stateInfo = $this->getStateInfo( "MOVE" );
				}
				$this->fullName='http://bcs.duapp.com/kangry-family/'.$this->fullName;
			}else{
				$this->stateInfo = $this->getStateInfo( "MOVE" );
			}
        }

注意，若你会使用base64编码的图片上传，那么还需要修改base64ToImage($base64Data)函数。将之修改成如下：

    private function base64ToImage( $base64Data )
    {
        $img = base64_decode( $base64Data );
        $this->fileName = time() . rand( 1 , 10000 ) . ".png";
        
		
		//上传到百度云平台
		include_once(INC_PATH."Baidu-BCS_SDK-PHP-1.2.2/bcs.class.php"); //载入SDK
		$bucket = 'kangry-family'; //我已经在百度平台建好了这个bucket,就像创建目录一样
		$object = '/'. $this->fileName; //保存到百度云的文件名
		$baiduBCS = new BaiduBCS (); //创建百度云存储对象
		$response = $baiduBCS->get_bucket_acl( $bucket ); //选择指定的bucket,就像切换数据库,切换目录,创建bucket可以看百度SDK里的例子
		
		if ($response->isOK ()) { // 切换bucket成功
			$response = $baiduBCS->create_object_by_content ( $bucket, $object, $img ); //上传文件
			if (! $response->isOK ()) { //上传失败执行
				$this->stateInfo = $this->getStateInfo( "IO" );
            	return;
			}
		}else{
			$this->stateInfo = $this->getStateInfo( "IO" );
            return;
		}
		
		/*
		$this->fullName = $this->getFolder() . '/' . $this->fileName;
        if ( !file_put_contents( $this->fullName , $img ) ) {
            $this->stateInfo = $this->getStateInfo( "IO" );
            return;
        }
		*/
		$this->fullName = 'http://bcs.duapp.com/kangry-family/' . $this->fileName;
        $this->oriName = "";
        $this->fileSize = strlen( $img );
        $this->fileType = ".png";
    }

9.修改远程抓取的图片（即图片搜索）相关代码。打开JS_PATH.'ueditor1_3_5-utf8-php/php/getRemoteImage.php'文件。修改该文件的getRemoteImage($uri,$config)函数，从75行代码开始，修改成如下：

			/*
            //创建保存位置
            $savePath = $config[ 'savePath' ];
            if ( !file_exists( $savePath ) ) {
                mkdir( "$savePath" , 0777 );
            }
			*/
            //写入文件
            //$tmpName = $savePath . rand( 1 , 10000 ) . time() . strrchr( $imgUrl , '.' );
            $tmpName = time() . rand( 1 , 10000 ) .strrchr( $imgUrl , '.' );
			
			//上传到百度云平台
			include_once(INC_PATH."Baidu-BCS_SDK-PHP-1.2.2/bcs.class.php"); //载入SDK
			$bucket = 'kangry-family'; //我已经在百度平台建好了这个bucket,就像创建目录一样
			$object = '/'.$tmpName; //保存到百度云的文件名
			$baiduBCS = new BaiduBCS (); //创建百度云存储对象
			$response = $baiduBCS->get_bucket_acl( $bucket ); //选择指定的bucket,就像切换数据库,切换目录,创建bucket可以看百度SDK里的例子
			
			if ($response->isOK ()) { // 切换bucket成功
				$response = $baiduBCS->create_object_by_content ( $bucket, $object, $img ); //上传文件
				if (! $response->isOK ()) { //上传失败执行
					array_push( $tmpNames , "error" );
				}else{
					array_push( $tmpNames , 'http://bcs.duapp.com/kangry-family/'.$tmpName );
				}
			}else{
				array_push( $tmpNames , "error" );
			}
			/*
            try {
                $fp2 = @fopen( $tmpName , "a" );
                fwrite( $fp2 , $img );
                fclose( $fp2 );
                array_push( $tmpNames ,  $tmpName );
            } catch ( Exception $e ) {
                array_push( $tmpNames , "error" );
            }
			*/

10.修改在线图片管理相关代码。打开JS_PATH.'ueditor1_3_5-utf8-php/php/imageManager.php'文件。修改该文件第40行的getfiles($path, &files=array())函数如下：

    function getfiles( $path , &$files = array() )
    {
		include_once(INC_PATH."Baidu-BCS_SDK-PHP-1.2.2/bcs.class.php"); //载入SDK
		$baiduBCS = new BaiduBCS (); //创建百度云存储对象
		$response = $baiduBCS->list_object( $path ); 
		if($response->isOK ()){
			$objectListArr=json_decode($response->body,true);
			for($i=0;$i<$objectListArr["object_total"];$i++){
				if($objectListArr['object_list'][$i]['is_dir']==='0'){
					$objectName=$objectListArr['object_list'][$i]['object'];
					if ( preg_match( "/\.(gif|jpeg|jpg|png|bmp)$/i" , $objectName ) ) {
                        $files[] = 'http://bcs.duapp.com/'.$path.$objectName;
                    }
				}
			}
		}
		/*
        if ( !is_dir( $path ) ) return null;
        $handle = opendir( $path );
        while ( false !== ( $file = readdir( $handle ) ) ) {
            if ( $file != '.' && $file != '..' ) {
                $path2 = $path . '/' . $file;
                if ( is_dir( $path2 ) ) {
                    getfiles( $path2 , $files );
                } else {
                    if ( preg_match( "/\.(gif|jpeg|jpg|png|bmp)$/i" , $file ) ) {
                        $files[] = $path2;
                    }
                }
            }
        }
		*/
        return $files;
    }

同时还要修改第十三行代码为你的bucket名。如下：

    //$paths = array('upload/','upload1/');
	$paths=array('kangry-family');

11.修改前端配置。打开JS_PATH.'ueditor.config.js'，修改如下：

        //图片上传配置区
        ,imageUrl:URL+"php/imageUp.php"             //图片上传提交地址
        //,imagePath:URL + "php/"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
		,imagePath:" "                     			//图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
        //,imageFieldName:"upfile"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数
        //,compressSide:0                            //等比压缩的基准，确定maxImageSideLength参数的参照对象。0为按照最长边，1为按照宽度，2为按照高度
        //,maxImageSideLength:900                    //上传图片最大允许的边长，超过会自动等比缩放,不缩放就设置一个比较大的值，更多设置在image.html中
        //,savePath: [ 'upload1', 'upload2', 'upload3' ]      //图片保存在服务器端的目录， 默认为空， 此时在上传图片时会向服务器请求保存图片的目录列表，
                                                            // 如果用户不希望发送请求， 则可以在这里设置与服务器端能够对应上的目录名称列表
                                                            //比如： savePath: [ 'upload1', 'upload2' ]

        //涂鸦图片配置区
        ,scrawlUrl:URL+"php/scrawlUp.php"           //涂鸦上传地址
        //,scrawlPath:URL+"php/"                            //图片修正地址，同imagePat
        ,scrawlPath:" "                            //图片修正地址，同imagePath

        //附件上传配置区
        ,fileUrl:URL+"php/fileUp.php"               //附件上传提交地址
        //,filePath:URL + "php/"                   //附件修正地址，同imagePath
        ,filePath:" "                   //附件修正地址，同imagePath
        //,fileFieldName:"upfile"                    //附件提交的表单名，若此处修改，需要在后台对应文件修改对应参数

        //远程抓取配置区
        //,catchRemoteImageEnable:true               //是否开启远程图片抓取,默认开启
        ,catcherUrl:URL +"php/getRemoteImage.php"   //处理远程图片抓取的地址
        ,catcherPath:" "                  //图片修正地址，同imagePath
        //,catchFieldName:"upfile"                   //提交到后台远程图片uri合集，若此处修改，需要在后台对应文件修改对应参数
        //,separater:'ue_separate_ue'               //提交至后台的远程图片地址字符串分隔符
        //,localDomain:[]                            //本地顶级域名，当开启远程图片抓取时，除此之外的所有其它域名下的图片都将被抓取到本地,默认不抓取127.0.0.1和localhost

        //图片在线管理配置区
        ,imageManagerUrl:URL + "php/imageManager.php"       //图片在线管理的处理地址
        //,imageManagerPath:URL + "php/"                                    //图片修正地址，同imagePath
        ,imageManagerPath:" "                                    //图片修正地址，同imagePath

        //屏幕截图配置区
        ,snapscreenHost: location.hostname                                 //屏幕截图的server端文件所在的网站地址或者ip，请不要加http://
        ,snapscreenServerUrl: URL +"php/imageUp.php" //屏幕截图的server端保存程序，UEditor的范例代码为“URL +"server/upload/php/snapImgUp.php"”
        ,snapscreenPath: " "
        ,snapscreenServerPort: location.port                                   //屏幕截图的server端端口
        //,snapscreenImgAlign: ''                                //截图的图片默认的排版方式

        //word转存配置区
        ,wordImageUrl:URL + "php/imageUp.php"             //word转存提交地址
        ,wordImagePath:" "                       //
        //,wordImageFieldName:"upfile"                     //word转存表单名若此处修改，需要在后台对应文件修改对应参数

因为后台返回的路径是http开头的绝对路径，因此ueditor.config.js中的imagePath、scrawPath等设为空格字符串（不是为空）【1】

经过以上更改，ok，大功告成！其中所有的kangry-family改成你自己的bucket名。若有问题，随时留言。

参考网址：【1】http://blog.csdn.net/auver/article/details/10103789

【2】http://developer.baidu.com/wiki/index.php?title=docs/cplat/stor/guide

【3】http://blog.csdn.net/ychzh2000/article/details/9129669

（本人还将ueditor和bcs整合成了一个整体了，下载地址：http://download.csdn.net/detail/wangshaner1/6812471）

你需要做的只是修改两个配置文件。

1、修改ueditor1_3_5-utf8-php-for-bcs/php/config.ueditor.for.bcs.1.0.php

define('BUCKET_NAME','');//更改成你的bucket名字
define('BCS_SDK_PATH','./Baidu-BCS_SDK-PHP-1.2.2/');	//bcs的sdk路径

2、修改ueditor1_3_5-utf8-php-for-bcs/php/config.ueditor.for.bcs.1.0.php/Baidu-BCS_SDK-PHP-1.2.2/conf.inc.php

//AK 公钥
define ( 'BCS_AK', '' );	//你的公钥
//SK 私钥
define ( 'BCS_SK', '' );	//你的私钥

本人测试，下载的版本有个小问题，需要将ueditor1_3_5-utf8-php\php\imageManager.php的第43行代码include_once('config.ueditor.for.bcs.1.0.php');剪切至本文件的第一行，其他不变。

若有其他问题，请留言。