Thinkphp整合最新Ueditor編輯器

時間 2019-11-07

原文原文鏈接

說到最新的富文本編輯器的確很多(ckeditor、fkeditor、ueditor),這些富文本編輯器若是單獨使用基本上很方便，不須要作額外的配置，只要把官方的插件下載下來放到一個web容器中，看看插件中提供的 index.html 裏的代碼就明白應該怎麼調用了。由於富文本編輯器會常常涉及到文件、圖片、視頻資源的上傳，若是自己所用到的框架或者是項目自己就有一個模塊是專門來處理這一起的，對一些資源須要作特殊處理的，例如水印處理，對圖片的大小處理(原圖、縮略圖)，那麼就設計到把富文本編輯器與你現有的上傳模塊結合起起來(富文本編輯器都有本身的上傳模塊)。這裏值得一提的是ueditor 這個富文本編輯器，各個版本之間的差別比較大(1.2+ 、1.3+、1.4+)，致使與現有的上傳模塊結合也存在差別。javascript

這裏筆者就採用最新版的ThinkPHP 與最新的百度Ueditor 作整合。php

首先訪問百度Ueditor的官方地址：下載列表 html

根據本身的需求下載不一樣的版本，這裏採用的是1.4.4PHP utf8版本的。前端

Thinkphp 這裏就不用說了，直接去tp官網下載最新的。java

步驟：web

前端部分：thinkphp

把下載下來的富文本編輯器從新命名例如 ueditor ,把把放到項目的根目錄(筆者建議你在根目錄新建一個文件件或者是把它放到項目的Public目錄下)，這個根據我的對網站目錄apache

的要求而決定，筆者是放在 Public 目錄下的json

其次就是到你須要加載富文本編輯器的地方，作一些初始化(1.引用富文本編輯器所須要的js文件 2.初始化插件)，代碼以下：後端

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Demo</title>
        <!-- JQuery 這裏本身引用 -->
    <js file="__ROOT__/Public/Ueditor/ueditor.config.js"/>
    <js file="__ROOT__/Public/Ueditor/ueditor.all.min.js"/>
    <!--建議手動加在語言，避免在ie下有時由於加載語言失敗致使編輯器加載失敗-->
    <!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
    <js file="__ROOT__/Public/Ueditor/lang/zh-cn/zh-cn.js"/>
    <script type="text/javascript" charset="utf-8">
    window.UEDITOR_HOME_URL = "__ROOT__/Public/Ueditor/";
    $(document).ready(function () {
      UE.getEditor('test_ue', {
      initialFrameHeight: 500,
      initialFrameWidth: 1100,
      serverUrl: "{:U(MODULE_NAME.'/Index/testUe')}"
    });
  });
    
    </script>    
</head>
<body>
 <textarea name="test_ue" id="test_ue" style="width:1024px;height:500px;"></textarea>
</body>
</html>

這裏UE.getEditor 中的 test_ue 就是 textarea的id名稱，其中 serverUrl 就是重寫了Ueditor上傳的地址，默認是調用 ueditor組件的 controller.php 去上傳的。

這裏前面的初始化部分已經完成了，接下來看看tp後端怎麼處理富文本編輯器的請求的。

後端部分：

這裏是一個demo，因此咱們就在後端的 IndexController中的testUe函數中處理。這裏這得注意的是，咱們須要看看Ueditor 自己是怎麼處理上傳的，代碼在Ueidtor/php/controller.php ,這裏咱們須要把這裏面的代碼拷貝到 test_Ue函數中作一些小的處理，源文件代碼以下：

<?php
//header('Access-Control-Allow-Origin: http://*.baidu.com'); //設置http://*.baidu.com容許跨域訪問
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'];

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"])) {
    echo $_GET["callback"] . '(' . $result . ')';
} else {
    echo $result;
}

主要處理3個部分就ok了， 1.修改 config.json的引用路徑，確保能被正確引用 2.上傳的代碼採用 thinkphp 提供的上傳 3.構造ueditor編輯器的返回值

其中第 3 個部分能夠參考與controll.php 並列的一個文件action_upload.php 文件，裏面寫的有返回格式要求：

/**
 * 獲得上傳文件所對應的各個參數,數組結構
 * array(
 *     "state" => "",          //上傳狀態，上傳成功時必須返回"SUCCESS"
 *     "url" => "",            //返回的地址
 *     "title" => "",          //新文件名
 *     "original" => "",       //原始文件名
 *     "type" => ""            //文件類型
 *     "size" => "",           //文件大小
 * )
 */

因此綜合上面的步驟，整理後的代碼以下：

public function testUe()
    {
        $ueditor_config = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("./Public/Ueditor/php/config.json")), true);
        $action = $_GET['action'];
        switch ($action) {
            case 'config':
                $result = json_encode($ueditor_config);
                break;
            /* 上傳圖片 */
            case 'uploadimage':
                /* 上傳塗鴉 */
            case 'uploadscrawl':
                /* 上傳視頻 */
            case 'uploadvideo':
                /* 上傳文件 */
            case 'uploadfile':
                $upload = new \Think\Upload();
                $upload->maxSize = 3145728;
                $upload->exts = array('jpg', 'gif', 'png', 'jpeg');
                $info = $upload->upload();
                if (!$info) {
                    $result = json_encode(array(
                        'state' => $upload->getError(),
                    ));
                } else {
               $url = __ROOT__ . "/Uploads/" . $info["upfile"]["savepath"] . $info["upfile"]['savename'];
                    $result = json_encode(array(
                        'url' => $url,
                        'title' => htmlspecialchars($_POST['pictitle'], ENT_QUOTES),
                        'original' => $info["upfile"]['name'],
                        'state' => 'SUCCESS'
                    ));
                }
                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;
        }

這裏默認採用Thinkphp 默認的長傳目錄「Uploads」這個目錄，默認在項目的根目錄下，若是你是在Linux系統上測試，須要確認的是你的apache對網站的根目錄有些的權限，

那麼它會自動建立，此外須要你手動建立。

另外對於一些站點來講，上傳至uploads 目錄只是臨時的，最終是須要講這些附件上傳至資源服務器。這種狀況下你上傳完的圖片在富文本編輯器中顯示的引用地址應該是從資源服務器引用過來的。這裏須要修改的只有2處：

1.在上傳至uploads 成功以後，就調用上傳至你的資源服務器的代碼

2.須要修改的是上面代碼中 url 的連接地址，應該修改爲你資源服務器的地址，確保能夠正確引用你剛纔上傳的附件。

以上的代碼只是一個 demo，僅供參考。

到此完畢！