UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協議，允許自由使用和修改代碼...

本文實際操作于ThinkPHP框架下，現分享與大家參考，整體流程詳解如下：

第一步：

下載UEditor編譯器，請到官網進行下載：http://ueditor.baidu.com/website/download.html

注：本例中所用UEditor編譯器版本為：【1.4.3.2 PHP版本】

　　　　　　　ThinkPHP框架版本為：【ThinkPHP3.2.3完整版】

第二步：

首先在后臺的項目中引入UEditor編譯器的js文件，如下：

<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.all.js"></script>

然后在需要使用UEditor編譯器的<textarea>標簽中，設置id屬值為：id="EditorId",如下：

<textarea type="text" name="content" id="EditorId" placeholder="請輸入內容"></textarea>

第三步;

對UEditor編譯器進行初始化，如下（以下代碼放于第二步的兩個JS文件下面）：

<script type="text/javascript" charset="utf-8">window.UEDITOR_HOME_URL = "__PUBLIC__/admin/ueditor/";//配置路徑設定為UEditor所放的位置 window.onload=function(){window.UEDITOR_CONFIG.initialFrameHeight=300;//編輯器的高度 window.UEDITOR_CONFIG.initialFrameWidth=800;//編輯器的寬度var editor = new UE.ui.Editor({imageUrl : '__APP__/Editor/uploadImage',fileUrl : '__APP__/Editor/uploadFile',imagePath : '',filePath : '',imageManagerUrl:'__APP__/Editor/imageManage', //圖片在線管理的處理地址 imageManagerPath:'__ROOT__/'});editor.render("EditorId");//此處的EditorId與<textarea name="content" id="EditorId">的id值對應 </textarea> } </script>

UEditor編譯器顯示效果如下：

至此UEditor編譯器的初始化配置已經完成。

另：對內容進行編輯提交后顯示效果如下：

第四部：UEditor富文本WEB編輯器的前后臺頁面數據的顯示

　　　　方法如下：

　　　　　　　　　|htmlspecialchars_decode|stripslashes（前后臺頁面顯示數據時不僅要反轉義還要去掉html實體化）

　　　　　　　　　如：{$VR.content|htmlspecialchars_decode|stripslashes}這樣就能正常顯示了,后臺顯示也是如此。

至此整個UEditor編輯器插件的安裝配置已ok。

---

?

優化點：

在使用UEditor編輯器編寫內容時你會發現，當輸入的內容較多時，編輯框的邊框高度也會自動增加，若希望輸入內容較多時以拉框滾動的效果。

方法：找到Ueditor文件根目錄下的ueditor.config.js，用編譯器打開，看到282~286行代碼如下：

//scaleEnabled//是否可以拉伸長高,默認true(當開啟時，自動長高失效)//,scaleEnabled:false//,minFrameWidth:800 //編輯器拖動時最小寬度,默認800//,minFrameHeight:220 //編輯器拖動時最小高度,默認220

現修改成如下：（編譯器拖動的最小高度可自行設置）

//scaleEnabled//是否可以拉伸長高,默認true(當開啟時，自動長高失效),scaleEnabled:true//,minFrameWidth:800 //編輯器拖動時最小寬度,默認800,minFrameHeight:300 //編輯器拖動時最小高度,默認220

效果如下：

以上詳細步驟，如有錯誤點，還請指正修改~

?

本文為作者原創，轉載請注明出處：http://www.cnblogs.com/wenzheshen/

總結

以上是生活随笔為你收集整理的Thinkphp下嵌套UEditor富文本WEB编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。