Ueditor官網： http://fex.baidu.com/ueditor/#dev-bale_width_grunt
UeditorAPI文檔： https://ueditor.baidu.com/doc/#COMMAND.LIST
Ueditor下載網址：https://ueditor.baidu.com/website/download.html
一、項目引用
因為Ueditor不支持模塊化引入，最簡單的方式就是把ueditor直接下載到項目里，這樣不存在跨域問題，因為Ueditor里的表格操作彈窗，這些都是用iframe嵌入，而我們項目所處的環境是不允許跨域的，所以我是把ueditor直接放在前端項目里。后面二次開發完成之后，將文件打包壓縮，放在發布項目里。還有另外一種方式，就是把Ueditor模塊化，使用import 引用，但是由於時間有限，資料也比較少，沒有過深的了解。
二、二次開發
1、在工具欄新增操作按鈕 插入布局
插入布局是在ueditor.all.js里直接修改源碼的，這個功能其實是和表格一樣，只是邊框是虛線，需要和表格共存。新增命令 UE.commands['insertlayout']，直接把table的命令拷下來，把命令的名稱修改一下，生成的html樣式修改一下就可以了。
然后在ui這塊生成一個按鈕
最后在commands 里加上insertlayout，在自定義 config.js里 toolbars加上這個命令，就可以在工具欄看到了，對應的圖標替換，是直接在ueditor.css里修改的，最直接。
2、自定義工具欄：插入動態表格
這個雖然和插入布局都是添加工具欄按鈕，但是不同於插入布局，動態表格需要對接項目的接口，及自定義彈窗，所以這個功能采用了ueditor提供的二次開發方法：
UE.registerUI('insertdtablebtn', function(editor, uiName) {
var dialog = new UE.ui.Dialog({
//指定彈出層中頁面的路徑，這里只能支持頁面
iframeUrl: '/ueditor/dialogs/dtable/dtable.html'
//需要指定當前的編輯器實例
editor:editor,
//指定dialog的名字
name:uiName,
//dialog的標題
title:"插入動態表格",
//指定dialog的外圍樣式
cssRules:"width:420px;height:165px;",
//如果給出了buttons就代表dialog有確定和取消
buttons:[{
className:'edui-okbutton',
label:'確定',
onclick:function () {
// 執行你的操作
// 獲取彈窗里的iframe 的 document
let targetDocument = this.target.offsetParent.offsetParent.offsetParent.children[2].children[1].contentWindow.document;
// 執行插入動態表格
editor.execCommand('insertdtable', {numCols:cols, border:1, source: source, ifIncrement});
dialog.close(false);
},
{
className:'edui-cancelbutton',
label:'取消',
onclick:function () {
dialog.close(false);
}
}
]});
var btn = new UE.ui.Button({
name:'dialogbutton' + uiName,
title:'插入動態表格',
//需要添加的額外樣式，指定icon圖標
cssRules :'background-image: url("https://dingtalkcdn.superboss.cc/dingcrm/yunyin/huodong/dtable@2x.png")!important; background-size: 15px 15px !important;background-position: center;background-repeat: no-repeat;',
onclick:function () {
//執行你的代碼
}
});
//因為是添加button,所以需要返回這個button
return btn;
})
彈窗內部是引用了一個html, 這個是一個自定義的頁面，寫在dialogs里。源碼里只需要添加命令 UE.commands['insertdtable']，類似於表格，生成你需要的HTML就可以了，不需要再添加ui了。
3、動態表格里的操作 禁止刪除行，插入行等操作
ueditor.all.js 重定義 UE.commands["insertrow"] UE.commands["deleterow"]
可以在你生成的html里添加自定義屬性，然后在重定義方法的時候進行判斷，其他地方的禁用操作類似這種操作，注意的是自定義的屬性需要在配置js里xss過濾白名單里加上自定義屬性的名稱，否則是加不上去的。
if($(ut.table).attr("data-type") == "dtable"){
return
}
在自定義配置結束后，還可以添加對編輯器的監聽，注冊事件，可以進行你自己的操作
// 注冊事件
ue.addListener("ready contentChange click keydown selectionchange",(type)=>{
// 獲取當前選區
let range = ue.selection.getRange();
let value = range.startContainer;
switch(type){
case "ready":
break;
case "selectionchange":
case "contentchange":
break;
case "click":
break;
deault:
break;
}
})
幾個主要的功能實現說完了，一些細節的操作就不多說了。其實中間最重要的是看懂ueditor.all.js里的源碼。在實現自己的功能時，用他們提供的API會方便很多，二次開發之前可以多看看 源碼和API文檔。看好了再動手，事半功倍。