ThinkPHP框架集成Ueditor编辑器，并将图片上传到阿里云OSS

网上有很多界面美观整洁的编辑器插件，但是相比较功能而言，还是百度的ueditor更为丰富，所以我选择了在项目中使用这款编辑器，下面介绍操作步骤，代码不多，自己动手，丰衣足食。

一、在项目中集成Ueditor插件：

首先，去官网下载对应版本的压缩包，因为用的是thinkPHP框架，所以这里选择了1.4.3.3 PHP 版本，UTF-8编码下载；

接着，解压下载的文件夹，将utf8-php文件夹下的所有文件全部拷贝到public/static/lib/ueditor文件夹下，lib是我项目中所有js插件的 存放地，下面的路径也以这个为准；

在模板文件中引用ueditor.config.js和ueditor.all.js就可以使用ueditor编辑器了，具体用法不再赘述。

二、将Ueditor编辑器中的文件上传到阿里云OSS

1.参考网页https://help.aliyun.com/document_detail/85580.html下载阿里云OSS PHP版sdk，将oss-sdk-php文件夹复制到/vendor/aliyuncs文件夹下（具体安装办法自选）；

2.修改Ueditor插件下的php/Uploader.class.php文件：

1）在文件顶部引入autoload文件，并使用相应的命名空间：

//如果你的代码存放路径跟我一样的话，这样可以直接使用
//这里我试过相对路径，发现不行，所以改用了绝对路径
require_once realpath(dirname(__FILE__) . '/../../../../') . '/vendor/aliyuncs/oss-sdk-php/autoload.php';
use OSS\OssClient;
use OSS\Core\OssException;

2）注释掉文件中110+行创建目录失败和移动文件两段代码，将其替换为上传到阿里云OSS的代码，替换代码如下：

//oss设置
$ossconfig = [
			'KeyId' => 'xxx',
			'KeySecret' => 'xxx',
			'Endpoint' => 'http://oss-cn-beijing.aliyuncs.com',
			'Bucket' => 'xxx'
		];

		//获取文件后缀
        $file_type = substr($this->filePath, strrpos($this->filePath, '.'));
		//得到今天日期
		$today = date('Ymd', time());
        //得到文件名
        $file_name = 'image/'.$today.'/'.$this->fileName;
        //$ossconfig为获取OSS的配置信息
        //$ossconfig = $this->getOssApi();
        //实例化OSS
        $ossClient = new OssClient($ossconfig['KeyId'], $ossconfig['KeySecret'], $ossconfig['Endpoint']);
        try {
            //执行阿里云上传
            $result = $ossClient->uploadFile($ossconfig['Bucket'], $file_name, $file["tmp_name"]);
            //赋给图片路径（原代码）
//          $this->fullName = $result['info']['url'];
//获得上传之后访问该图片的路径
			$endpoint = str_replace('http://', '', $ossconfig['Endpoint']);
            $this->ossimgurl = "https://".$ossconfig['Bucket'].".".$endpoint."/".$file_name;//ossimgurl这是自定义属性，避免以ueditor方式获得图片地址
            $this->stateInfo = $this->stateMap[0];
        } catch (OssException $e) {
//          $this->stateInfo = $this->getStateInfo("ERROR_FILE_MOVE");
            //将错误信息修改为阿里云上传失败的错误信息
            $this->stateInfo = $e->getMessage();
        }

修改到这里，就可以将图片上传到OSS了，打开编辑器页面尝试下，复制一张图片到编辑器，然后点击html查看源代码，就可以看到阿图片上传到阿里云之后的访问路径了。

PS：注意，虽然我们实现了上传到OSS的功能，但实际上，无论是草稿图片还是正式的文章图片都会上传，如果你希望节省OSS的使用空间，那么就需要在编辑器中删除图片的时候，同样删除OSS中的图片（想了一下，操作复杂，没做），或者你可以祈求各位编辑大大手下留情，不要上传那么多的垃圾图片。

三、将ueditor插件后台代码整合到thinkPHP框架

上面的操作虽然实现了我们的目标，但是细心的同学们已经发现，我们把ueditor后台的操作代码暴露到了public文件夹下，这就意味着用户可以直接访问到这些文件，相对而言很不安全，所以我们需要进一步优化这些代码，将其集成到thinkPHP框架下，步骤如下：

1.新建sdk应用模块，即在application文件夹下新建sdk文件夹，并在该模块下创建Ueditor控制器，具体路径为application/sdk/controller/Ueditor.php；

2.将ueditor/php文件夹下的所有文件移动到application/sdk/controller文件夹下；

3.在Ueditor.php控制器中新建upload方法，并将controller.php文件中的所有代码复制到upload方法中，相应地，需要修改下期中config.json文件的路径，修改后的控制器代码如下：

<?php
namespace app\sdk\controller;

use think\Controller;

class Ueditor extends Controller
{
	
	//首页
    public function upload()
    {
    	//header('Access-Control-Allow-Origin: http://www.baidu.com'); //设置http://www.baidu.com允许跨域访问
		//header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); //设置允许的跨域header
		date_default_timezone_set("Asia/chongqing");
		error_reporting(E_ERROR);
		header("Content-Type: text/html; charset=utf-8");
		
        //同样的，修改为绝对路径
		$current_path = __DIR__.'/';
		$CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents($current_path."config.json")), true);
//		$action = $_GET['action'];
		$action = request()->param('action');
		
		switch ($action) {
		    case 'config':
		        $result =  json_encode($CONFIG);
		        break;
		
		    /* 上传图片 */
		    case 'uploadimage':
		    /* 上传涂鸦 */
		    case 'uploadscrawl':
		    /* 上传视频 */
		    case 'uploadvideo':
		    /* 上传文件 */
		    case 'uploadfile':
		        $result = include("action_upload.php");
		        break;
		
		    /* 列出图片 */
		    case 'listimage':
		        $result = include("action_list.php");
		        break;
		    /* 列出文件 */
		    case 'listfile':
		        $result = include("action_list.php");
		        break;
		
		    /* 抓取远程文件 */
		    case 'catchimage':
		        $result = include("action_crawler.php");
		        break;
		
		    default:
		        $result = json_encode(array(
		            'state'=> '请求地址出错'
		        ));
		        break;
		}
		
		/* 输出结果 */
		if (isset($_GET["callback"])) {
		    if (preg_match("/^[\w_]+$/", $_GET["callback"])) {
		        echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')';
		    } else {
		        echo json_encode(array(
		            'state'=> 'callback参数不合法'
		        ));
		    }
		} else {
		    echo $result;
		}
    }
}

相应地，controller.php文件已经没用了，可以删掉。

4.因为文件路径改变了，所有需要修改下uploader.class.php文件中autoload的加载路径，新路径为：

$dir = dirname(dirname(dirname(__DIR__)));
require_once $dir.'/vendor/aliyuncs/oss-sdk-php/autoload.php';
   
use OSS\OssClient;
use OSS\Core\OssException;

5.不要忘记在路由文件中加上新的路由：

//Ueditor
Route::rule('/ueditor/upload', 'sdk/ueditor/upload', 'get|post');

注意：这里一定要加上post方式，get方式可以获取配置，上传文件就得用post了。

6.最后一条，记得在ueditor.config.js中修改上传文件的路径，修改public/static/lib/ueditor/lib/ueditor/ueditor.config.js文件：

// 服务器统一请求接口路径
        // , serverUrl: URL + "php/controller.php"
        , serverUrl:"/ueditor/upload"

OK，到此为止，操作完成，刷新页面（不是开发者模式的清空缓存），重新复制一张图片到编辑器窗口，等图片加载完成时查看源代码，搞定。

后记，为了实现功能，代码写的有些乱，比如ossconfig直接写到了uploader.class.php文件中，正常的做法是应该放置到配置文件中，使用时获得配置，这些就自己实现吧。