說到最新的富文本編輯器的確不少(ckeditor、fkeditor、ueditor),這些富文本編輯器如果單獨使用基本上很方便，不需要做額外的配置，只要把官方的插件下載下來放到一個web容器中，看看 插件中提供的 index.html 里的代碼就明白應該怎么調用了。因為富文本編輯器會經常涉及到文件、圖片、視頻資源的上傳，如果本身所用到的框架或者是項目本身就有一個模塊是專門來處理這一塊兒的，對一些資源需要做特殊處理的，例如水印處理，對圖片的大小處理(原圖、縮略圖)，那么就設計到把富文本編輯器與你現有的上傳模塊結合起起來(富文本編輯器都有自己的上傳模塊)。這里值得一提的是ueditor 這個富文本編輯器，各個版本之間的差異比較大(1.2+ 、1.3+、1.4+)，導致與現有的上傳模塊結合也存在差異。
這里筆者就采用最新版的ThinkPHP 與 最新的百度Ueditor 做整合。
首先訪問百度Ueditor的官方地址：下載列表
根據自己的需求下載不同的版本，這里采用的是1.4.4PHP utf8版本的。
Thinkphp 這里就不用說了，直接去tp官網下載最新的。
步驟：
前端部分：
把下載下來的富文本編輯器重新命名例如 ueditor ,把把放到項目的根目錄(筆者建議你在根目錄新建一個文件件或者是把它放到項目的Public目錄下)，這個根據個人對網站目錄
的要求而決定，筆者是放在 Public 目錄下的
其次就是到你需要加載富文本編輯器的地方，做一些初始化(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，僅供參考。
到此完畢！