【一】簡介

（1）介紹

一款百度開發的JS插件

ue編輯器，全稱Ueditor(翻譯為你的編輯器)，百度開發的在線編輯器，是一款在線編輯器軟件，在線編輯器又稱為“富文本編輯器”。

國外也有一款類似的編輯器CKeditor

百度ue編輯器官網網址：http://ueditor.baidu.com

（2）作用

常見的例如新聞文章的發布編輯、格式化新聞、添加圖片或視頻等。用的時候和Word差不多

為了方便圖文的混排

（3）官網演示

UEditor、UEditorMINI兩種，簡稱為UE和UM。UM是UE的簡化版本

①UE介紹：UE功能比UM多

②UM介紹：UMeditor,簡稱UM,是為滿足廣大門戶網站對于簡單發帖框，或者回復框需求所定制的在線富文本編輯器。 UM的主要特點就是容量和加載速度上的改變，主文件的代碼量為139k，而且放棄了使用傳統的iframe模式，采用了div的加載方式， 以達到更快的加載速度和零加載失敗率。現在UM的第一個使用者是百度貼吧，貼吧每天幾億的pv是對UM各種指標的最好測試平臺。 當然隨著代碼的減少，UM的功能對于UE來說還是有所減少，但我們經過調研和大家對于UM提出的各種意見，提供了現在UM的功能版本， 雖然有刪減，但也有增加，比如拖拽圖片上傳，chrome的圖片拖動改變大小等。讓UM能在功能和體積上達到一個平衡。UM還會提供 CDN方式，減少大家部署的成本。我們的目標不僅是要提高在線編輯的編輯體驗，也希望能改變前端技術中關于富文本技術的門檻，讓大家不再覺得這塊是個大坑。

（4）下載

推薦直接下載開發版的UTF-8版即可

（5）解壓后查看index.html源碼

    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
    <!-- 類庫文件 -->
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
    <!-- 語言文件 -->
    <!--建議手動加在語言，避免在ie下有時因為加載語言失敗導致編輯器加載失敗-->
    <!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型，比如你在配置項目里配置的是英文，這里加載的中文，那最后就是中文-->

代碼塊：編輯內容區域在<script id="editor" type="text/plain">，主要通過id="editor"實例化

<div>
    <h1>完整demo</h1>
    <script id="editor" type="text/plain"></script>
</div>

實例化編輯器代碼：

<script type="text/javascript">
    //實例化編輯器
    //建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
    var ue = UE.getEditor('editor');
</script>

總結：

（1）通過demo文件里的index.html代碼，分析后可以發現，一共3步即可實現------①引入外部js文件；②定義容器editor；③實例化容器，生成編輯器效果

（2）之所以沒有引入css文件的步驟，因為在底層代碼js里便用了css了

【二】應用實例

接著上篇文章視頻學習筆錄---ThinkPHP---TP功能類之公文管理功能，使用UE編輯器替換掉公文管理的textarea效果

接下來按照步驟進行

（1）將utf8-php解壓目錄復制到公共靜態資源文件目錄下的插件目錄（plugin插件目錄），和用Highcharts一樣直接將整個解壓文件復制過來

并改名為ue，方便后期查看

（2）按照上面的demo三步驟進行文件引入、定義容器、實例化容器，生成編輯器

注意：容器可以直接將textarea標簽的id替換掉，或者將整個<script>標簽復制過來

（3）優化顯示效果：適當調整即可

調整后結果

（4）開始修改控制器

①先來測試看下提交后的數據

$post = I('post.');
dump($post);die;

輸出結果：

array(3) {
  ["title"] => string(6) "新的"
  ["author"] => string(3) "旺"
  ["editorValue"] => string(207) "<p>我是內容<
                                 img src="/ueditor/php/upload/image/20180402/1522640195528516.jpg" 
                                 title="1522640195528516.jpg" 
                                 alt="008ba1edbe4c0365a538b71189546615.jpg"/></p>"
}

②需要對輸出的數據進行操作，否則會被過濾

兩個問題：

問題1. UE編輯器默認name為editValue，和數據表的字段名不一樣，后期添加會被過濾掉；

解決辦法：給當前容器標簽指定一個name值，等于數據表字段即可

原先的容器為：

            <p><label for="content">內容：</label>
                <!-- <textarea name="content" id="editor"></textarea> -->
                <script id="editor" name="content" type="text/plain"></script>
            </p>

現在給容器加上name，（name值為數據表字段）

<script id="editor" name="content" type="text/plain"></script>

再次打印輸出，結果為：

array(3) {
  ["title"] => string(6) "新的"
  ["author"] => string(3) "旺"
  ["content"] => string(63) "<p><strong>薩克斯哪塊</strong></p>"
}

問題2.在UE編輯器源碼中的一些樣式會被轉化為實體字符,那么是誰去轉化的實體字符?

有兩種可能,UE編輯器或者ThinkPHP，此處轉碼由ThinkPHP的I方法轉化的，使用的是htmlspecialchars。

拓展：關于UE的幾個說明

①防止SQL注入和XSS跨站腳本攻擊；只通過I方法無法解決，后面用插件htmlpurifiy來對指定的標簽進行過濾。

②關于UE中的表情使用，需要聯網；

③圖片上傳，該功能需要配置，配置文件ue/php/config.php。需要指定路徑，否則會自動創建文件uedotor

上傳后自動創建路徑對應文件ueditor，上傳的圖片會存在該目錄下

④讀取時需要將數據表中的實體字符進行還原，使用函數htmlspecialchars_decode（html特殊字符解碼）進行還原

【三】上傳類

具體在下片文章做介紹

.

總結

以上是生活随笔為你收集整理的ThinkPHP---ue编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

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