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