UEditor如何進行二次開發

ueditor 雖然功能眾多，但對於廣大開發者來說，還是有很多定製化的功能需求，如果都靠ueditor團隊自己開發那是不現實的，這時就需要廣大開發者在ueditor的基礎上自己開發定製功能。但在之前的版本中，ueditor對於二次開發的支援不夠優化，經常需要開發者不僅要開發相應的功能，例如command命令,plugin外掛程式等，還要在ueditor上修改多處檔案，例如，新增按鈕，新增樣式等等，才能將功能新增到ueditor中。這樣的方式對於以後的公升級和後續定製功能的維護，都會造成維護困難的問題。介於次，ueditor從1.4.1開始，新增對於二次開發的擴充套件支援。

無需對 ueditor **做任何修改，只需在ueditor之外通過ueditor提供的二次開發介面開發定製功能.這種開發方式不僅避免了修改ueditor原始碼，方便日後ueditor的公升級，而且通過介面，可以將開發的定製功能維護到乙個檔案中或者乙個目錄中，方便日後對其維護。

對於 ueditor 的二次開發，一般多為新增按鈕，下拉筐或者是新增乙個dialog。基於這幾種常規的方式，我在_examples目錄下分別書寫了3個型別的定製demo。

addcustomizebutton.js 新增乙個按鈕

addcustomizecombox.js 新增乙個下拉框

addcustomizedialog.js 新增乙個彈出層

除了新增彈出層需要乙個而外的html頁面外，對於需要新增和修改的功能**全部都維護到乙個js檔案中了。

使用檔案的方式:

新新增的按鈕就完成了。例項化編輯器時，無需再而外新增任何**。

前面講了如何部署你的功能，這個小節來和大家講一下，ueditor提供那些介面，讓大家可以在編輯器之外擴充套件你的功能。

ue
.registerui
('uiname'
,function
(editor
,uiname),
[index,[
editorid
]]);

考慮到大家的功能基本上都會擴充套件乙個ui和這個ui做的事情，所以ueditor提供了registerui這個介面，可以讓開發者動態的注入擴充套件的內容。

uiname,是你為新新增的ui起的名字，這裡可以是1個或者多個，「uiname」後者是「uiname1 uiname2 uiname3」

index,是你想放到*******的那個位置，預設是放到最後

editorid,當你的頁面上有多個編輯器例項時，你想將這個ui擴充套件到那個編輯器例項上，這裡的editorid是給你編輯器初始化時，傳入的id,預設是每個例項都會加入你的擴充套件

新增乙個按鈕

ue
.registerui
('button'
,function
(editor
,uiname
)});
//建立乙個button
varbtn 
=newue.
ui.button
(});
editor
.addlistener
('selectionchange'
,function
()else
});//因為你是新增button,所以需要返回這個button
return
btn;
});

新增多個

ue
.registerui
('bold italic redo undo underline strikethrough'
,function
(editor
,uiname
)});
//建立乙個button
varbtn 
=newue.
ui.button
(});
editor
.addlistener
('selectionchange'
,function
()else
});//因為你是新增button,所以需要返回這個button
return
btn;
});

之前ueditor對於第三方的開發確實支援的不夠靈活，導致為了開發還要汙染ueditor本身，這為後學公升級新增了麻煩。當然現在這個設計可能還有考慮不到的地方，大家可以直接發issue給我們，我們會進行及時的補丁，並在後續的版本中更新。

UEditor如何進行二次開發

實戰 Ueditor擴充套件二次開發

實戰 Ueditor擴充套件二次開發

AutoCAD進行二次開發

UEditor如何進行二次開發

實戰 Ueditor擴充套件二次開發

實戰 Ueditor擴充套件二次開發

AutoCAD進行二次開發

相關推薦