ueditor是由百度研發(fā)出來的一款文本編輯器，也叫百度文本編輯器。它具有可定制、體積小巧、支持多個
瀏覽器、用戶體驗優(yōu)秀等等特點，另外它可以使用JavaScript編寫，無縫的與Java、.NET、PHP、ASP 等程序集成?，F(xiàn)在已經(jīng)廣泛使用在論壇、博客、Wiki、CMS、商城等互聯(lián)網(wǎng)應(yīng)用上。有需要的可以來下載試用下一哦！
使用教程
1、在本站下載好軟件安裝包解壓以后整體拷貝到j(luò)ava web項目的網(wǎng)頁根目錄下。我這里是用myeclipse建的項目，所以把其拷貝到了WebRoot下即可。
2、引用ueditor/jsp/lib下的jar包。你可以選擇直接在Java Build Path中配置，或者直接放入WebRoot/WEB-INF/lib文件夾中，項目會自動引用該文件夾下的jar。推薦使用直接放到WEB-INF/lib下，這樣你的jar是隨著項目移動的，系統(tǒng)會按照相對路徑加載項目下的jar。如果選擇第一種，如果當jar文件移動了，那么這個功能就會失效的。
3、在頁面上引入2個js文件
4、在頁面的編輯器位置，添加html代碼
5、支持圖片、文檔、音樂等文件上傳功能，如果你想要配置上傳路徑，可以修改 ueditor/jsp/config.json。
這個文件對于每一個配置項，都明確的文字說明。附上一段圖片上傳的配置吧：
6、支持自定義功能，界面上顯示的功能都是可配置的，
7、看起來是6步，其實每一步都很簡單了。為了讓小伙伴們看得更清楚些，來張效果圖吧：
使用方法
1、在編輯器光標處插入內(nèi)容使用( inserthtml )
UE.getEditor('editor').execCommand('inserthtml', text);
2、在其中已有內(nèi)容的末尾追加內(nèi)容使用
UE.getEditor(Emotion.TchUeditor).setContent('testtext', true);
3、光標焦點在編輯器中顯示使用
4、添加多個按鈕
UE.registerUI('bold italic redo undo underline strikethrough', function(editor, uiName) {
//注冊按鈕執(zhí)行時的command命令，使用命令默認就會帶有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
alert('execCommand:' + uiName)
}
});
//創(chuàng)建一個button
var btn = new UE.ui.Button({
//按鈕的名字
name: uiName,
//提示
title: uiName,
//添加額外樣式,指定icon圖標,這里默認使用一個重復(fù)的icon
cssRules: 'background-position: -500px 0;',
//點擊時執(zhí)行的命令
onclick: function() {
//這里可以不用執(zhí)行命令,做你自己的操作也可
editor.execCommand(uiName);
}
});
//當點到編輯內(nèi)容上時，按鈕要做的狀態(tài)反射
editor.addListener('selectionchange', function() {
var state = editor.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
//因為你是添加button,所以需要返回這個button
return btn;});ueditor軟件特點
在設(shè)計上采用了經(jīng)典的分層架構(gòu)設(shè)計理念，盡量做到功能層次之間的輕度耦合。具體來講，整個系統(tǒng)分為了核心層、命令插件層和UI層這樣三個低耦合的層次。
1、核心層提供了編輯器底層的一些方法和概念，如DOM樹操作、Selection、Range等。
2、在核心層之上覆蓋的是命令插件層。之所以叫命令插件層，是因為軟件中所有的功能型實現(xiàn)都是通過這一層中的命令和插件來完成的，并且各個命令和插件之間基本互不耦合——使用者需要使用哪個功能就導(dǎo)入哪個功能對應(yīng)的命令或者插件文件，完全不用考慮另外那些雜七雜八的JS文件（極少數(shù)插件除外，關(guān)于這些插件下文會整理出一個依賴列表來供同學(xué)們參考）。
理論上來講，所有的命令都是可以用插件來代替的，但是依然將兩者分開的主要原因是命令都是一些靜態(tài)的方法，無需隨editor實例初始化，從而優(yōu)化了編輯器的性能。而插件隨編輯器的初始化而初始化，性能上會有少許的影響，但相比命令而言，插件能夠完成更加復(fù)雜的功能。其中最主要的一個特點是在插件內(nèi)部既可以為編輯器注冊命令，也可以為編輯器綁定監(jiān)聽事件。這個特點使得為編輯器添加任何功能都可以在插件中獨立完成。
3、在命令插件層之上則是UI層。它的UI設(shè)計與核心層和命令插件層幾乎完全解耦，簡單的幾個配置就可以為編輯器在界面上添加額外的UI元素和功能，具體的配置下面將會深入闡述。
ueditor功能介紹
1、功能全面
涵蓋流行富文本編輯器特色功能，獨創(chuàng)多種全新編輯操作模式。
2、用戶體驗
屏蔽各種瀏覽器之間的差異，提供良好的富文本編輯體驗。
3、開源免費
開源基于MIT協(xié)議，支持商業(yè)和非商業(yè)用戶的免費使用和任意修改。
4、定制下載
細粒度拆分核心代碼，提供可視化功能選擇和自定義下載。
5、專業(yè)穩(wěn)定
百度專業(yè)QA團隊持續(xù)跟進，上千自動化測試用例支持。
ueditor軟件優(yōu)點
1、體積小巧，性能優(yōu)良，使用簡單
2、分層架構(gòu)，方便定制與擴展
3、滿足不同層次用戶需求，更加適合團隊開發(fā)
4、豐富完善的中文文檔
5、多個瀏覽器支持：Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome
6、更好的使用體驗
7、擁有專業(yè)QA團隊持續(xù)支持，已應(yīng)用在百度各大產(chǎn)品線上
ueditor常見問題
一、如何自定義請求地址1、由于所有編輯器請求都通過editor對象的getActionUrl方法獲取請求地址，可以直接通過復(fù)寫這個方法實現(xiàn)，例子如下：
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return 'http://a.b.com/upload.php';
} else if (action == 'uploadvideo') {
return 'http://a.b.com/video.php';
} else {
return this._bkGetActionUrl.call(this, action);
}
}2、action類型以及說明
uploadimage：//執(zhí)行上傳圖片或截圖的action名稱
uploadscrawl：//執(zhí)行上傳涂鴉的action名稱
uploadvideo：//執(zhí)行上傳視頻的action名稱
uploadfile：//controller里,執(zhí)行上傳視頻的action名稱
catchimage：//執(zhí)行抓取遠程圖片的action名稱
listimage：//執(zhí)行列出圖片的action名稱
listfile：//執(zhí)行列出文件的action名稱
二、如何阻止div標簽自動轉(zhuǎn)換為p標簽1、原因：
剛開始使用的開發(fā)者，會發(fā)現(xiàn)一個現(xiàn)象，粘貼到編輯器中的內(nèi)容如果帶有div標簽，待粘貼到編輯器之后，會發(fā)現(xiàn)粘貼到編輯器中的div已經(jīng)被轉(zhuǎn)換為p標簽了。首先這不是一個bug,這是它對于進入編輯器中的數(shù)據(jù)進行的過濾處理。在其中表示段落的標簽是p標簽，很多的編輯操作都是基于p標簽進行的處理。當然我們對div標簽也做了兼容性的處理，如果你想保留div標簽不讓其進行轉(zhuǎn)換也是可以的。
2、方法：
UE.getEditor('editorID', {
allowDivTransToP: false
})三、ueditor實例創(chuàng)建后為什么直接執(zhí)行接口報錯1、場景
開發(fā)者在創(chuàng)建編輯器時后，會執(zhí)行一些接口或者調(diào)用編輯命令，例如
var ue = UE.getEditor('editor');
ue.setContent('初始化的內(nèi)容');
//或者調(diào)用命令
//ue.execCommand('inserthtml','內(nèi)容'); 這些代碼看起來沒有問題，編輯器實例也能正確拿到，但就是沒有效果。
2、創(chuàng)建編輯區(qū)域的原理
其實出現(xiàn)這種問題，其實是大家不了解它的創(chuàng)建原理導(dǎo)致的。因為它的編輯區(qū)域是使用iframe作為編輯容器的。所以當編輯器創(chuàng)建實例后，先會創(chuàng)建一個iframe元素，然后在iframe元素中寫入一些腳本，這些腳本會在iframe元素初始化完成時被調(diào)用。腳本的作用主要是為編輯器實例賦值iframe中的body,window,document對象的引用。 看到這里，大家就應(yīng)該明白它的初始化過程其實是個異步過程。
因為是個異步過程。所以場景中的書寫方式就會出現(xiàn)問題了。雖然工廠方法getEditor能正確返回編輯器實例，但同步的代碼ue.setContent馬上就被執(zhí)行了，因為setContent是在編輯容器中寫內(nèi)容，這時需要用到body,document等元素，但這些元素的引用賦值卻在異步中才做的賦值。所以才會出現(xiàn)直接執(zhí)行setContent時會出現(xiàn)無效的問題。當然有時不同瀏覽器的效果會出現(xiàn)不同。一些高級的瀏覽器比如chrome有時是可以的，但大部分ie瀏覽器都不行。這主要是因為瀏覽器的性能所致的。
3、正確的初始化方式
為開發(fā)者提供了ready接口，他會在編輯器所有的初始化操作都結(jié)束時調(diào)用。保證你要做的操作能在一個完整的初始化環(huán)境中執(zhí)行。
UE.getEditor('editor').ready(function() {
//this是當前創(chuàng)建的編輯器實例
this.setContent('內(nèi)容')
})
老用戶會說，不是還有個addListener可以注冊ready事件嗎？
UE.getEditor('editor').addListener('ready', function() {
//this是當前創(chuàng)建的編輯器實例
this.setContent('內(nèi)容')
}) 確實這樣寫也能達到效果，但這樣創(chuàng)建有個小問題。如果的這段代碼是用在第一次創(chuàng)建時就沒有問題。但如果編輯器已經(jīng)創(chuàng)建，你需要再次賦值，想使用同一段代碼，這時，這里的事件ready是不會觸發(fā)的。但你調(diào)用接口ready注入你的操作，這種方式，會判斷如果你的編輯器已經(jīng)初始化完成了，那ready將會自動加載注入的內(nèi)容，如果還沒有初始化結(jié)束，它會自己注冊ready事件，當完成初始化后再掉起自己。所以建議開發(fā)者使用ready接口作為初始化時注入操作。
小編點評
ueditor編輯器是一款非常實用的WBE編輯軟件，所有功能完全免費，綠色純凈。
更新日志
ueditor編輯器v1.4.3.3
修復(fù) xss 安全漏洞
0條評論