說起線上文字編輯器，這對web程式設計師來說，一點都不陌生。市面上有許多的產品，比如fckeditor，kindeditor等，還有我們今天要使用的百度富文字編輯器——uEditor。其實無論是哪種線上文字編輯器，都可以理解成一個獨立的js包（含樣式、配置、程式語言互動的介面等）。而對於線上文字編輯器與程式語言框架的整合，只要讓框架能夠正確的讀取這個js包的路徑，並且讓這個js包能夠遵守框架的訪問規則就行。讓我們就開始uEditor與tp5的整合吧！
1、簡化H-ui中的uEditor包並且移動到指定目錄
在tp5整合H-ui的第一篇部落格中說明了（開發環境搭建與公共模板設定），所有後臺管理的樣式都是放置在'./public/static/admin'的目錄之下，如圖：

設計時，我們想到，我們不止是後臺系統需要用到ueditor，前臺也需要用到（比如遊客的評論，就可以用簡約版的uEditor）。所以，我們應該把之前H-ui預設存放的位置放到前、後臺都方便呼叫的目錄。也就是將整個ueditor目錄從'./public/static/admin/lib'目錄移動到'./public/static'目錄之下，如圖：

我們只要整合php版本的，所以將ueditor中支援其他語言的包都刪除，如圖：

2、頁面使用ueditor
這裡還是增加公告資訊為例（noticeAdd.html），只需要在當前的頁面引入以下程式碼：

<script type="text/javascript" src="__STATIC__/ueditor/1.4.3/ueditor.config.js"></script> 
<script type="text/javascript" src="__STATIC__/ueditor/1.4.3/ueditor.all.min.js"> </script> 
<script type="text/javascript" src="__STATIC__/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
 

其中替代常量'__STATIC__'在'./thinkphp/library/think'目錄下的view.php中已經配置了，就是指向'./public/static'目錄，如圖：

接下來就是在當前頁面使用就行了

<div class="row cl">
	<input type="hidden" id="content" name="content" />
	<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章內容：</label>
	<div class="formControls col-xs-8 col-sm-9"> 
		<script id="editor" type="text/plain" style="width:100%;height:400px;"></script>
	</div>
</div>
 

其中

<script id="editor" type="text/plain" style="width:100%;height:400px;"></script>

就是我們要使用ueditor的位置。
然後在script的指令碼中例項化一下就行（注意id要一致）

<script type="text/javascript">
	$(function(){
		var ue = UE.getEditor('editor');	
	});
</srcipt>

配置到這裡，就可以使用了，是不是很簡單？如圖：

3、ueditor中的圖片上傳與路徑配置說明
如果你是一路按照tp5整合H-ui系列部落格說明來做的話，你會發現，ueditor中的圖片上傳功能也是可以直接使用的，真是大快人心。如圖：

這裡還是要詳細說明下ueditor在php中圖片上傳的一些核心程式碼。正所謂，知其然，知其所以然。
這個要從我們引入的那三個ueditor檔案（ueditor.config.js、ueditor.all.min.js、lang/zh-cn/zh-cn.js）開始。核心的就是ueditor.config.js這個檔案，見名知意，它就是ueditor的配置檔案。
我們知道，無論使用哪種程式語言，js要請求伺服器，必須告訴js一個有效的請求路徑。很明顯ueditor的php包中已經實現了圖片上傳的功能，只需要讓js能夠正確的呼叫這個php檔案就行。我們檢視如下程式碼，ueditor作者給予了非常詳細的說明：

...
...
(function () {


    /**
     * 編輯器資原始檔根路徑。它所表示的含義是：以編輯器例項化頁面為當前路徑，指向編輯器資原始檔（即dialog等資料夾）的路徑。
     * 鑑於很多同學在使用編輯器的時候出現的種種路徑問題，此處強烈建議大家使用"相對於網站根目錄的相對路徑"進行配置。
     * "相對於網站根目錄的相對路徑"也就是以斜槓開頭的形如"/myProject/ueditor/"這樣的路徑。
     * 如果站點中有多個不在同一層級的頁面需要例項化編輯器，且引用了同一UEditor的時候，此處的URL可能不適用於每個頁面的編輯器。
     * 因此，UEditor提供了針對不同頁面的編輯器可單獨配置的根路徑，具體來說，在需要例項化編輯器的頁面最頂部寫上如下程式碼即可。當然，需要令此處的URL等於對應的配置。
     * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
     */
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();


    /**
     * 配置項主體。注意，此處所有涉及到路徑的配置別遺漏URL變數。
     */
    window.UEDITOR_CONFIG = {


        //為編輯器例項新增一個路徑，這個不能被註釋
        UEDITOR_HOME_URL: URL


        // 伺服器統一請求介面路徑
        , serverUrl: URL + "php/controller.php"
...
...    

其中的 serverUrl: URL + "php/controller.php" 就是js呼叫的有效路徑，如果這個路徑錯誤了，是不可能正常上傳圖片的。和小夥伴們一樣，剛開始對js檔案中的'URL'的賦值有些疑惑：

var URL = window.UEDITOR_HOME_URL || getUEBasePath();

這段程式碼到底獲取到的是什麼值？
這個等式是js慣用的取值方法，取window.UEDITOR_HOME_URL，如果為空，就取getUEBasePath()函式返回的值。關於window.UEDITOR_HOME_URL，作者在註釋中說得很清楚：在具體的使用頁面頂部自己路徑值，
window.UEDITOR_HOME_URL = "/xxxx/xxxx/"
還有就是，getUEBasePath()函式，到底獲取的是什麼？如果深究下去，貌似很複雜。其實這一切ueditor的作者都幫我們寫好了，我們只要拿來是用就行。我們可以在使用的頁面（noticeAdd.html）在後臺列印測試一下，如：

那麼控制檯就可以看見

所以這其實就是訪問ueditor目錄的URL字首，我們當然可以書寫自己的程式碼來替換URL的值了（這個在與java的MVC框架整合的時候經常需要自己寫）。
理解了訪問controller.php路徑的問題，接下來我們來看看controller.php幹了些什麼事情？而我們通過ueditor上傳的圖片又預設存放到哪裡了？
我們先看看controller.php的原始碼，發現挺簡單的業務邏輯，就是解析了下同目錄級別的配置檔案config.json和根據操作的action選擇不同的php邏輯做對應的處理。上面都有註釋，有時間可以追蹤細看。
既然controller.php已經引導我們到了config.json這個配置檔案，到了這一步，我想程式設計師的嗅覺開始發揮作用了，我們只要在這裡配置圖片、視訊、檔案等的存放路徑就行了。我們按照它的註釋去配置就行。值得注意的是，當我們按註釋依葫蘆畫瓢完成了配置後，圖片具體存放在什麼地方？（我們不可能在系統專案中配置絕對的碟符路徑，都是跟著專案走的）。這時候，我們來看看ueditor是怎麼預設讀取圖片的。通過controller.php找到action_list.php檔案。如圖：


其中$_SERVER['DOCUMENT_ROOT']就是根目錄，這個目錄不是絕對的碟符和目錄，而是我們自己在Apache伺服器中配置的DocumentRoot路徑，如下面兩張圖的配置：


那麼圖片的位置就存放在：D:/tools/wamp64/www/blog/public/upload/image/當前操作日期；這個目錄下了，其中${INSTALL_DIR}是Wampserver64的配置變數，也就是當前Wampserver64軟體存放的碟符位置。
所以，小夥伴們發現自己上傳成功了，但是卻沒有預覽的時候，可以追蹤一下這兩個配置路徑。如果需要在程式中更改檔案的獲取路徑可以去修改uploader.class.php中的getFilePath函式：

到這一步，我們就可以暢快的使用圖片上傳的功能了。
4、頁面提交和檢視ueditor內容
有兩個又小又笨的問題說明下：
4.1、我們如何提交ueditor的內容？
注意，我們整合的時候，是用的srcipt標籤，並不是有效的form標籤。其實解決起來非常簡單，使用js獲取ueditor的內容，並且賦值給一個隱藏的form標籤就行。如以下程式碼：

var ue = UE.getEditor('editor');
//將uEditor中的內容賦值到content中
var content=ue.getContent();
$("#content").val(content);	

4.2、在檢視頁面，如何讓ueditor不能編輯？

//檢視頁面設定不可編輯
 var ue=new UE.ui.Editor({readonly:true});
 ue.render('editor');