把WordPress文本編輯器替換百度富文本編輯器UEditor

時間 2019-11-13

標籤 wordpress 文本編輯器替換百度 ueditor 欄目 Wordpress 简体版

原文原文鏈接

UEditor是由百度 Web前端研發部開發的所見即所得的富文本在線編輯器，具備輕量，可定製，注重用戶體驗等特色，開源基於BSD協議，容許互聯網開發者自由傳播和使用代碼 javascript

新增功能 php

遠程圖片抓取 css

服務器圖片在線管理 html

增長了baidu圖片搜索功能，搜索圖片而後直接插入到編輯器中前端

word的本地圖片取得寛高 java

插入視頻，可預覽，而且界面加入了視屏搜索功能，而且能夠插入視屏預覽圖到編輯器中 web

附件上傳瀏覽器

自動排版服務器

單元格屬性編輯編輯器

ie下的截屏功能

源碼模式下css進行了簡寫

添加了上來就能夠全屏的配置項

添加了contentchagne事件

優化了首頁自定製下載

功能優化

修改了行間距的展現方式

段間距變爲段前距和段後距

改進了autolink的效果，例如: dddhttp://www.baidu.com 回車,http://www.baidu.com也能夠被匹配到了

分頁符能夠刪除

加強了表格的編輯功能

優化了狀態反射的性能，改成編輯器得到焦點纔會觸發，失去焦點不在觸發狀態查詢

修正了focus()方法，執行編輯器實例的focus方法能夠選回失去焦點以前的選區

重寫了浮動工具欄，支持混亂模式下的工具欄滾動

重寫了autoheight插件，去掉setInterval的方式，而且長高時不在跳動

文件上傳提供flash源碼

提供了.net的事例代碼

首頁文檔進行了改進

上圖爲完整版，官方網站也有mini版的下載

首先點擊這裏進入UEditor下載頁面，在這裏能夠下載完整版或定製具體功能，很方便很個性。我這裏直接下載的完整版，將全部文件解壓到「baidu」目錄。在「baidu」目錄同目錄建立一個「index.php」文件，內容以下：

 
        < 
        head 
        > 
       
 
        < 
        meta  
        http 
        - 
        equiv 
        = 
        "Content-Type" 
          
        content 
        = 
        "text/html; charset=UTF-8" 
        > 
       
 
        < 
        title 
        >百度 
        UEditor實例 
        < 
        / 
        title 
        > 
       
 
        <script  
        type 
        = 
        "text/javascript" 
          
        src 
        = 
        "/editor_config.js" 
        > 
        </script> 
       
 
        <script  
        type 
        = 
        "text/javascript" 
          
        src 
        = 
        "/editor_all.js" 
        > 
        </script> 
       
 
        < 
        link  
        rel 
        = 
        "stylesheet" 
          
        href 
        = 
        "/themes/default/ueditor.css" 
        / 
        > 
       
 
        < 
        / 
        head 
        > 
       
 
        < 
        body 
        > 
       
 
        < 
        div  
        id 
        = 
        "myEditor" 
        > 
        < 
        / 
        div 
        > 
       
 
        <script  
        type 
        = 
        "text/javascript" 
        > 
       
 
             
        var 
          
        editor 
          
        = 
          
        new 
          
        baidu 
        . 
        editor 
        . 
        ui 
        . 
        Editor 
        ( 
        ) 
        ; 
       
 
            
        editor 
        . 
        render 
        ( 
        "myEditor" 
        ) 
        ; 
       
 
        </script> 
       
 
        < 
        / 
        body 
        > 
       

而後在瀏覽器中打開這個文件就能夠看到編輯器了。

要想將wordpress中的默認文本編輯器換成UEditor，須要下載一個插件，點擊這裏到官方下載插件。將插件安裝啓用，而後將插件目錄下的「ue3.3.2-edit-form-advanced.php」重命名爲「edit-form-advanced.php」並替換「wp-admin」目錄下的同名文件(注意備份)。wordpress默認編輯器就變成百度的富文本編輯器UEditor了。

如需修改編輯器的各類行爲，可直接修改插件主文件main.php下方實例化對象時傳入的參數便可，參數名稱請參考editor_config.js文件。不須要使用編輯器時，直接停用便可還原成系統默認的編輯器。

——————————————————————————————————————

本地測試結果：

功能豐富強大，在某種意義上是更加符合國人的習慣，和用慣wp編輯器的相比，實屬意義不大，暫時測試3.6版本無問題，不知之後程序升級有沒有影響

文章演示截圖：

相應的美觀還須要本身在主題樣式調式的，每一個主題的演示效果都不會同樣，這裏僅是爲了演示個文章表情，和代碼高亮顯示（無需插件）

原文轉載：http://www.newsky365.com/wp-ueditor/