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

更多內(nèi)容請點(diǎn)擊：BabelPad|文本編輯器

軟件介紹

ueditor是一款免費(fèi)開源的web編輯器。ueditor主要用于web網(wǎng)頁的開發(fā)和代碼的編輯，能夠提供良好的代碼編輯環(huán)境，開源的性質(zhì)讓你可以對其進(jìn)行任意的修改達(dá)到個(gè)性化使用的目的。

功能特色

1、功能全面

涵蓋流行富文本編輯器特色功能，獨(dú)創(chuàng)多種全新編輯操作模式。

2、用戶體驗(yàn)

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

3、開源免費(fèi)

開源基于MIT協(xié)議，支持商業(yè)和非商業(yè)用戶的免費(fèi)使用和任意修改。

4、定制下載

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

5、專業(yè)穩(wěn)定

百度專業(yè)QA團(tuán)隊(duì)持續(xù)跟進(jìn)，上千自動化測試用例支持。

軟件特色

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

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

2、在核心層之上覆蓋的是命令插件層。之所以叫命令插件層，是因?yàn)閁Editor中所有的功能型實(shí)現(xiàn)都是通過這一層中的命令和插件來完成的，并且各個(gè)命令和插件之間基本互不耦合——使用者需要使用哪個(gè)功能就導(dǎo)入哪個(gè)功能對應(yīng)的命令或者插件文件，完全不用考慮另外那些雜七雜八的JS文件（極少數(shù)插件除外，關(guān)于這些插件下文會整理出一個(gè)依賴列表來供同學(xué)們參考）。

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

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

使用教程

UEditor這種富文本編輯器一般不需要安裝，只需要把壓縮包解壓就可以得到源碼目錄，從源碼目錄我們看到軟件的具體結(jié)構(gòu)，然后就能對軟件進(jìn)行使用，很多用戶不知道軟件的使用方法，下面小編為大家?guī)硎褂媒坛蹋靵砜纯窗伞?/p>

1、解壓后的源碼目錄結(jié)構(gòu)如下所示：

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

dialogs：彈出對話框?qū)?yīng)的資源和JS文件

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

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

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

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

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

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

2、編輯器的實(shí)例化頁面，導(dǎo)入編輯器需要的三個(gè)入口文件，示例代碼如下：

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

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

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

/**

* 開發(fā)版本的文件導(dǎo)入

*/

(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>’);

}

})();

可以看到，這里有一項(xiàng)：baseURL，就是JS文件的路由，這里要根據(jù)ueditor_api.js文件的實(shí)際路徑去配置！

上傳圖片配置

在該編輯器中想要上傳圖片的話，首先就需要對軟件進(jìn)行配置，確定圖片的上傳提交地址，圖片修正地址等等內(nèi)容，下面小編直接為大家?guī)砦业纳蟼鲌D片配置作為參考，用戶可以根據(jù)該配置設(shè)計(jì)出自己的上傳圖片配置。

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

//圖片上傳配置區(qū)

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

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

,imagePath:"test.mathandcs.com/"

,imageFieldName:"upfile"                   //圖片數(shù)據(jù)的key,若此處修改，需要在后臺對應(yīng)文件修改對應(yīng)參數(shù)

這里的imageURL是圖片上傳所調(diào)用的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/";

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

由于相對路徑和絕對路徑的問題，生成的地址有可能是錯(cuò)的，這時(shí)就要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);

這里的正則的規(guī)則要根據(jù)具體情況來定！

自定義工具按鈕

想要在軟件中使用自定義工具按鈕的話，首先需要進(jìn)行自定義的參數(shù)設(shè)置，軟件加入按鈕UI，對UI進(jìn)行更改，然后為UI添加事件，很多用戶不知道整體的操作方法，下面小編就為大家?guī)硪粋€(gè)具體的流程，感興趣的用戶快來看看吧。

第一步：找到editor_config.js（或者ueditor.config.js）文件中的toolbars參數(shù)，增加一個(gè)“camnpr”字符串，對應(yīng)著添加一個(gè)labelMap，用于鼠標(biāo)移上按鈕時(shí)的提示。

第二步：找到ui/editorui.js文件中的btnCmds數(shù)組，在其中同樣增加一個(gè)“camnpr”字符串?！救绻也坏絜ditorui.js，請直接在ueditor.all.js文件里搜索var btnCmds = [】

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

在此我們可以添加一個(gè)

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

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

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

更新日志

1.5.0

修復(fù)已知的漏洞

1.4.3.3版本

bug修復(fù)

修復(fù) xss 安全漏洞

1.4.3.2版本

bug修復(fù)

更新 video-js 以修復(fù) XSS 安全漏洞

1.4.3.1版本

bug修復(fù)

修復(fù) SSRF 安全漏洞