背景

UEditor雖然功能眾多，但對(duì)于廣大開(kāi)發(fā)者來(lái)說(shuō)，還是有很多定制化的功能需求，如果都靠UEditor團(tuán)隊(duì)自己開(kāi)發(fā)那是不現(xiàn)實(shí)的，這時(shí)就需要廣大開(kāi)發(fā)者在UEditor的基礎(chǔ)上自己開(kāi)發(fā)定制功能。但在之前的版本中，UEditor對(duì)于二次開(kāi)發(fā)的支持不夠優(yōu)化，經(jīng)常需要開(kāi)發(fā)者不僅要開(kāi)發(fā)相應(yīng)的功能，例如command命令,plugin插件等，還要在UEditor上修改多處文件，例如，添加按鈕，添加樣式等等，才能將功能添加到UEditor中。這樣的方式對(duì)于以后的升級(jí)和后續(xù)定制功能的維護(hù)，都會(huì)造成維護(hù)困難的問(wèn)題。介于次，UEditor從1.4.1開(kāi)始，添加對(duì)于二次開(kāi)發(fā)的擴(kuò)展支持。

二次開(kāi)發(fā)方式

無(wú)需對(duì) UEditor 代碼做任何修改，只需在UEditor之外通過(guò)UEditor提供的二次開(kāi)發(fā)接口開(kāi)發(fā)定制功能.這種開(kāi)發(fā)方式不僅避免了修改UEditor源碼，方便日后UEditor的升級(jí)，而且通過(guò)接口，可以將開(kāi)發(fā)的定制功能維護(hù)到一個(gè)文件中或者一個(gè)目錄中，方便日后對(duì)其維護(hù)。

部署定制功能

對(duì)于 UEditor 的二次開(kāi)發(fā)，一般多為添加按鈕，下拉筐或者是添加一個(gè)dialog?；谶@幾種常規(guī)的方式，我在_examples目錄下分別書(shū)寫了3個(gè)類型的定制demo。

addCustomizeButton.js 添加一個(gè)按鈕

addCustomizeCombox.js 添加一個(gè)下拉框

addCustomizeDialog.js 添加一個(gè)彈出層

除了添加彈出層需要一個(gè)而外的html頁(yè)面外，對(duì)于需要添加和修改的功能代碼全部都維護(hù)到一個(gè)js文件中了。

使用文件的方式:

<script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="editor_api.js"> </script> <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script> <!--添加按鈕--> <script type="text/javascript" charset="utf-8" src="addCustomizeButton.js"></script>

新添加的按鈕就完成了。實(shí)例化編輯器時(shí)，無(wú)需再而外添加任何代碼。

開(kāi)發(fā)細(xì)節(jié)

前面講了如何部署你的功能，這個(gè)小節(jié)來(lái)和大家講一下，UEditor提供那些接口，讓大家可以在編輯器之外擴(kuò)展你的功能。

UE.registerUI('uiname', function(editor, uiname) {//do something }, [index, [editorId]]);

考慮到大家的功能基本上都會(huì)擴(kuò)展一個(gè)UI和這個(gè)UI做的事情，所以UEditor提供了registerUI這個(gè)接口，可以讓開(kāi)發(fā)者動(dòng)態(tài)的注入擴(kuò)展的內(nèi)容。

uiname,是你為新添加的UI起的名字，這里可以是1個(gè)或者多個(gè)，“uiname”后者是“uiname1 uiname2 uiname3”

function，是實(shí)際你要做的事情，這里提供兩個(gè)參數(shù)，editor是編輯器實(shí)例，如果你有多個(gè)編輯器實(shí)例，那每個(gè)編輯器實(shí)例化后，都會(huì)調(diào)用這個(gè)function,并且把editor傳進(jìn)來(lái),uiname,你為ui起的名字，如果前邊你添加的是多個(gè)的化，這里function會(huì)被調(diào)用多次，并且將每一個(gè)ui名字傳遞進(jìn)來(lái).如果函數(shù)返回了一個(gè)UI 實(shí)例，那這個(gè)UI實(shí)例就會(huì)被默認(rèn)加到工具欄上。當(dāng)然也可以不返回任何UI。比如希望監(jiān)控selectionchange事件，在某些場(chǎng)景下彈出浮層，這時(shí)就不需要返回任何UI.

index,是你想放到toolbar的那個(gè)位置，默認(rèn)是放到最后

editorId,當(dāng)你的頁(yè)面上有多個(gè)編輯器實(shí)例時(shí)，你想將這個(gè)ui擴(kuò)展到那個(gè)編輯器實(shí)例上，這里的editorId是給你編輯器初始化時(shí)，傳入的id,默認(rèn)是每個(gè)實(shí)例都會(huì)加入你的擴(kuò)展

添加按鈕

添加一個(gè)按鈕

UE.registerUI('button', function(editor, uiName) {//注冊(cè)按鈕執(zhí)行時(shí)的command命令，使用命令默認(rèn)就會(huì)帶有回退操作editor.registerCommand(uiName, {execCommand: function() {alert('execCommand:' + uiName)}});//創(chuàng)建一個(gè)buttonvar btn = new UE.ui.Button({//按鈕的名字name: uiName,//提示title: uiName,//添加額外樣式，指定icon圖標(biāo)，這里默認(rèn)使用一個(gè)重復(fù)的iconcssRules: '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è)buttonreturn btn; });

添加多個(gè)

UE.registerUI('bold italic redo undo underline strikethrough', function(editor, uiName) {//注冊(cè)按鈕執(zhí)行時(shí)的command命令，使用命令默認(rèn)就會(huì)帶有回退操作editor.registerCommand(uiName, {execCommand: function() {alert('execCommand:' + uiName)}});//創(chuàng)建一個(gè)buttonvar btn = new UE.ui.Button({//按鈕的名字name: uiName,//提示title: uiName,//添加額外樣式,指定icon圖標(biāo),這里默認(rèn)使用一個(gè)重復(fù)的iconcssRules: '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è)buttonreturn btn; });

在完整版本的下載包里，我寫了3個(gè)例子，添加一個(gè)按鈕，下拉筐，彈出一個(gè)浮層，大家可以參考

總結(jié)

之前UEditor對(duì)于第三方的開(kāi)發(fā)確實(shí)支持的不夠靈活，導(dǎo)致為了開(kāi)發(fā)還要污染UEditor本身，這為后學(xué)升級(jí)添加了麻煩。當(dāng)然現(xiàn)在這個(gè)設(shè)計(jì)可能還有考慮不到的地方，大家可以直接發(fā)issue給我們，我們會(huì)進(jìn)行及時(shí)的補(bǔ)丁，并在后續(xù)的版本中更新。

總結(jié)

以上是生活随笔為你收集整理的UEditor 如何进行二次开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。