富文本編輯器UEditor編輯器是一款電腦文本編輯軟件，該工具由百度開發，面向廣大開發者開源使用，所以任何破解版都不是真實的，小編將其最新版本從github下載過來，快安裝體驗吧！

更多內容請點擊：BabelPad|文本編輯器

軟件介紹

ueditor是一款免費開源的web編輯器。ueditor主要用于web網頁的開發和代碼的編輯，能夠提供良好的代碼編輯環境，開源的性質讓你可以對其進行任意的修改達到個性化使用的目的。

功能特色

1、功能全面

涵蓋流行富文本編輯器特色功能，獨創多種全新編輯操作模式。

2、用戶體驗

屏蔽各種瀏覽器之間的差異，提供良好的富文本編輯體驗。

3、開源免費

開源基于MIT協議，支持商業和非商業用戶的免費使用和任意修改。

4、定制下載

細粒度拆分核心代碼，提供可視化功能選擇和自定義下載。

5、專業穩定

百度專業QA團隊持續跟進，上千自動化測試用例支持。

軟件特色

UEditor 在設計上采用了經典的分層架構設計理念，盡量做到功能層次之間的輕度耦合。具體來講，整個系統分為了核心層、命令插件層和UI層這樣三個低耦合的層次。

1、核心層提供了編輯器底層的一些方法和概念，如DOM樹操作、Selection、Range等。

2、在核心層之上覆蓋的是命令插件層。之所以叫命令插件層，是因為UEditor中所有的功能型實現都是通過這一層中的命令和插件來完成的，并且各個命令和插件之間基本互不耦合——使用者需要使用哪個功能就導入哪個功能對應的命令或者插件文件，完全不用考慮另外那些雜七雜八的JS文件（極少數插件除外，關于這些插件下文會整理出一個依賴列表來供同學們參考）。

理論上來講，所有的命令都是可以用插件來代替的，但是依然將兩者分開的主要原因是命令都是一些靜態的方法，無需隨editor實例初始化，從而優化了編輯器的性能。而插件隨編輯器的初始化而初始化，性能上會有少許的影響，但相比命令而言，插件能夠完成更加復雜的功能。其中最主要的一個特點是在插件內部既可以為編輯器注冊命令，也可以為編輯器綁定監聽事件。這個特點使得為編輯器添加任何功能都可以在插件中獨立完成。

3、在命令插件層之上則是UI層。UEditor的UI設計與核心層和命令插件層幾乎完全解耦，簡單的幾個配置就可以為編輯器在界面上添加額外的UI元素和功能，具體的配置下面將會深入闡述。

使用教程

UEditor這種富文本編輯器一般不需要安裝，只需要把壓縮包解壓就可以得到源碼目錄，從源碼目錄我們看到軟件的具體結構，然后就能對軟件進行使用，很多用戶不知道軟件的使用方法，下面小編為大家帶來使用教程，快來看看吧。

1、解壓后的源碼目錄結構如下所示：

_examples：編輯器完整版的示例頁面

dialogs：彈出對話框對應的資源和JS文件

themes：樣式圖片和樣式文件   php/jsp/.net：涉及到服務器端操作的后臺文件，根據你選擇的不同后臺版本，這里也會不同，這里我們選擇php

third-party：第三方插件(包括代碼高亮，源碼編輯等組件）

editor_all.js：_src目錄下所有文件的打包文件（用于發布版本）

editor_api.js: API接口配置文件（開發版本）

editor_all_min.js：editor_all.js文件的壓縮版，建議在正式部署時才采用

editor_config.js：編輯器的配置文件，建議和編輯器實例化頁面置于同一目錄

2、編輯器的實例化頁面，導入編輯器需要的三個入口文件，示例代碼如下：

3、然后在編輯器的實例化頁面中創建編輯器實例及其DOM容器，示例代碼如下：

4、在editor_config.js中查找URL變量配置編輯器在你項目中的路徑。

5、如果用editor_api.js （也就是不用editor.all.js）開發時,打開editor_api.js,代碼如下

/**

* 開發版本的文件導入

*/

(function (){

var paths  = [

’editor.js’,

’core/browser.js’,

’core/utils.js’,

’core/EventBase.js’,

’core/dtd.js’,

’core/domUtils.js’,

’core/Range.js’,

’core/Selection.js’,

’core/Editor.js’,

’core/filterword.js’,

’core/node.js’,

’core/htmlparser.js’,

’core/filternode.js’,

’plugins/inserthtml.js’,

’plugins/image.js’,

’plugins/justify.js’,

’plugins/font.js’,

’plugins/link.js’,

’plugins/print.js’,

’plugins/paragraph.js’,

’plugins/horizontal.js’,

’plugins/cleardoc.js’,

’plugins/undo.js’,

’plugins/paste.js’,

’plugins/list.js’,

’plugins/source.js’,

’plugins/enterkey.js’,

’plugins/preview.js’,

’plugins/basestyle.js’,

’plugins/video.js’,

’plugins/selectall.js’,

’plugins/removeformat.js’,

’plugins/keystrokes.js’,

’plugins/dropfile.js’,

’ui/widget.js’,

’ui/button.js’,

’ui/toolbar.js’,

’ui/menu.js’,

’ui/dropmenu.js’,

’ui/splitbutton.js’,

’ui/colorsplitbutton.js’,

’ui/popup.js’,

’ui/scale.js’,

’ui/colorpicker.js’,

’ui/combobox.js’,

’ui/buttoncombobox.js’,

’ui/modal.js’,

’ui/tooltip.js’,

’ui/tab.js’,

’ui/separator.js’,

’ui/scale.js’,

’adapter/adapter.js’,

’adapter/button.js’,

’adapter/fullscreen.js’,

’adapter/dialog.js’,

’adapter/popup.js’,

’adapter/imagescale.js’,

’adapter/autofloat.js’,

’adapter/source.js’,

’adapter/combobox.js’

],

/**

* @author wusuopubupt

* @date 2013-10-24

*

* modified  baseURL = ’/ueditor/src/’;

*/

baseURL = ’/ueditor/src/’;

for (var i=0,pi;pi = paths[i++];) {

document.write(’<script type="text/javascript" src="’+ baseURL + pi +’"></script>’);

}

})();

可以看到，這里有一項：baseURL，就是JS文件的路由，這里要根據ueditor_api.js文件的實際路徑去配置！

上傳圖片配置

在該編輯器中想要上傳圖片的話，首先就需要對軟件進行配置，確定圖片的上傳提交地址，圖片修正地址等等內容，下面小編直接為大家帶來我的上傳圖片配置作為參考，用戶可以根據該配置設計出自己的上傳圖片配置。

打開ueditor.config.js，可以看到如下配置：

//圖片上傳配置區

,imageUrl:URL+"php/imageUp.php"             //圖片上傳提交地址

//,imagePath:URL + "php/"                     //圖片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置

,imagePath:"test.mathandcs.com/"

,imageFieldName:"upfile"                   //圖片數據的key,若此處修改，需要在后臺對應文件修改對應參數

這里的imageURL是圖片上傳所調用的php文件的地址，而imagePath則是為新上傳的圖片生成的圖片地址的host部分；

再打開ueditor/php/下的imageUp.php文件，有配置如下：

$config = array(

"savePath" => "/var/www/store/upload/" ,             //存儲文件夾

"maxSize" => 1000 ,                   //允許的文件最大尺寸，單位KB

"allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允許的文件格式

);

//上傳文件目錄

//$Path = "upload/";

$Path = "/var/www/store/upload/";

這里需要把上傳文件到服務器的目的地址（上傳文件保存文件）savePath修改成你指定的文件地址。

由于相對路徑和絕對路徑的問題，生成的地址有可能是錯的，這時就要hack一下生成圖片URL的JS文件：

ueditor/dialogs/image/image.js 中修改：

/**

* @author wusuopubupt

* @date 2013-10-24

* @return url modified

* */

var reg = /\/var\/www\/test\/upload\//;

url = url.replace(reg,"");

var $img = $("<img src=’" + editor.options.imagePath + url + "’ class=’edui-image-pic’ />"),

$item = $("<div class=’edui-image-item edui-image-upload-item’><div class=’edui-image-close’></div></div>").append($img);

這里的正則的規則要根據具體情況來定！

自定義工具按鈕

想要在軟件中使用自定義工具按鈕的話，首先需要進行自定義的參數設置，軟件加入按鈕UI，對UI進行更改，然后為UI添加事件，很多用戶不知道整體的操作方法，下面小編就為大家帶來一個具體的流程，感興趣的用戶快來看看吧。

第一步：找到editor_config.js（或者ueditor.config.js）文件中的toolbars參數，增加一個“camnpr”字符串，對應著添加一個labelMap，用于鼠標移上按鈕時的提示。

第二步：找到ui/editorui.js文件中的btnCmds數組，在其中同樣增加一個“camnpr”字符串。【如果找不到editorui.js，請直接在ueditor.all.js文件里搜索var btnCmds = [】

找到此位置，我們可以看到：

在此我們可以添加一個

'camnpr': '~/dialogs/emotion1/camnpr.html'

這個camnpr.html頁面時自定義的頁面，如果你要點擊此按鈕彈出這個頁面，還需要加入如下代碼（先在ueditor.all.js頁面找到 editorui["emotion"] = function 在這段代碼下邊加入）：

如果你要此功能，就不要添加【第五步】的操作了。效果圖如下：

更新日志

1.5.0

修復已知的漏洞

1.4.3.3版本

bug修復

修復 xss 安全漏洞

1.4.3.2版本

bug修復

更新 video-js 以修復 XSS 安全漏洞

1.4.3.1版本

bug修復

修復 SSRF 安全漏洞