Ueditor 1.4.3.1 使用 ThinkPHP 3.2.3 的上传类进行图片上传

在 ThinkPHP 3.2.3 中集成百度编辑器最新版 Ueditor 1.4.3.1，同时将编辑器自带的上传类替换成 ThinkPHP 3.2.3 中的上传类。

① 下载编辑器（下载地址：http://ueditor.baidu.com/website/download.html），解压后放入项目根目录的 Data 目录并且将解压出来的目录重命名为 ueditor。

项目中的控制器 ./Application/Admin/Controller/BlogController.class.php 和 视图 ./Application/Admin/View/Blog_add_blog.html 分别是添加博客文章的控制器和视图。

② 在 Blog_add_blog.html 中引入编辑器的配置文件 ./Data/ueditor/ueditor.config.js 和 编辑器的类库文件 ./Data/ueditor/ueditor.all.min.js

③ 在 Blog_add_blog.html 中，用于填写文章的文本域：

<textarea name="content" id="content"></textarea>

因此需要在视图文件的 js 中进行设置，根据默认文本域的 id 将文本域替换成百度编辑器：

<script>
window.UEDITOR_HOME_URL = '__ROOT__/Data/ueditor/';
window.onload = function() {
UE.getEditor('content');
}
</script>

同时可以对编辑器的其他配置进行设置，例如：

window.onload = function() {
window.UEDITOR_CONFIG.initialFrameWidth = 750; //初始化编辑器宽度
window.UEDITOR_CONFIG.initialFrameHeight = 200;  //初始化编辑器高度
UE.getEditor('content');
}

④ 根据浏览器的开发者工具可以看到在上传图片时请求的地址是 ./Data/ueditor/php/controller.php，参数 action = uploadimage



controller.php 是服务器统一请求接口路径，在 line 9 ~ line 23 中如果请求的参数 action = uploadimage 时，则

$result = include("action_upload.php");

在 action_upload.php 中包含了上传的配置选项，并且包含了 Uploader.class.php 文件

Uploader.class.php 文件是 ueditor 的上传类文件。

因此如果需要自定义上传类，只需要自定义请求地址即可（把 controller.php 替换成自己的地址），根据文档中 http://fex.baidu.com/ueditor/#qa-customurl 的说明，由于所有ueditor请求都通过editor对象的getActionUrl方法获取请求地址，可以直接通过复写这个方法实现在视图文件，只需要 ./Application/Admin/View/Blog_add_blog.html 的 js 中添加上：

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage') {    //上传图片
return "{:U('Admin/Blog/upload',array('action'=>'uploadimage'),'')}";
} else  if(action == 'config') {    //加载配置
return this._bkGetActionUrl.call(this, action);
}
}

视图文件完整的 js：

<!-- ueditor start-->
<script>
window.UEDITOR_HOME_URL = '__ROOT__/Data/ueditor/';
window.onload = function() {
window.UEDITOR_CONFIG.initialFrameWidth = 750; //初始化编辑器宽度
window.UEDITOR_CONFIG.initialFrameHeight = 200;  //初始化编辑器高度
//自定义请求地址
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage') {    //上传图片
return "{:U('Admin/Blog/upload',array('action'=>'uploadimage'),'')}";
} else  if(action == 'config') {    //加载配置
return this._bkGetActionUrl.call(this, action);
}
}
//自定义请求地址结束
UE.getEditor('content');
}
</script>
<script src="__ROOT__/Data/ueditor/ueditor.config.js"></script>
<script src="__ROOT__/Data/ueditor/ueditor.all.min.js"></script>
<!--ueditor end-->

⑤ 在控制器的 upload 方法中，只需要对 ./Data/ueditor/controller.php 中的方法进行修改：

<?php
namespace Admin\Controller;
use Think\Upload;

class BlogController extends CommonController{
//上传图片
public function upload() {
date_default_timezone_set("Asia/chongqing");
error_reporting(E_ERROR);
header("Content-Type: text/html; charset=utf-8");

$CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("config.json")), true);
$action = $_GET['action'];
if('uploadimage' == $action) { //上传图片
//处理图片上传开始
//实例化上传类
$upload = new Upload();
//配置
$upload->subName = array('date', 'Ym');//子目录创建方式
//上传
$info = $upload->upload();
//p($info);//上传信息
if($info) {
/**
* 得到上传文件所对应的各个参数,数组结构
* array(
*     "state" => "",          //上传状态，上传成功时必须返回"SUCCESS"
*     "url" => "",            //返回的地址
*     "title" => "",          //新文件名
*     "original" => "",       //原始文件名
*     "type" => ""            //文件类型
*     "size" => "",           //文件大小
* )
*/
$arr = array(
'state'=>'SUCCESS',
'url'=>'http://'.$_SERVER['SERVER_NAME'].'/Uploads/'.$info['upfile']['savepath'].$info['upfile']['savename'],
'title'=>$info['upfile']['savename'],
'original'=>$info['upfile']['name'],
'type'=>$info['upfile']['ext'],
'size'=>$info['upfile']['size']
);
//print_r($arr);
/* 返回数据 */
$result = json_encode($arr);
} else {
$arr = array('state'=>$upload->getError());
}
//图片上传结束
} elseif('config' == $action) { //加载配置
$result =  json_encode($CONFIG);
}
/* 输出结果 */
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;
}
}
}