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;
        }
    }
}