具體實現我是參考官方給的customizeDialogPage.html、addCustomizeDialog.js倆個文件的demo來做的，但是很多具體細節沒有描述清楚。
我使用的版本是Java版，ueditor 1.4.3版本.
js如下
UE.registerUI('dialog',function(editor,uiName){ //創建dialog var dialog = new UE.ui.Dialog({ //指定彈出層中頁面的路徑，這里只能支持頁面,因為跟addCustomizeDialog.js相同目錄，所以無需加路徑 iframeUrl:'customizeDialogPage.html', //需要指定當前的編輯器實例 editor:editor, //指定dialog的名字 name:uiName, //dialog的標題 title:"這是個測試浮層", //指定dialog的外圍樣式 cssRules:"width:600px;height:300px;", //如果給出了buttons就代表dialog有確定和取消 buttons:[ { className:'edui-okbutton', label:'確定', onclick:function () { dialog.close(true); } }, { className:'edui-cancelbutton', label:'取消', onclick:function () { dialog.close(false); } } ]}); //參考addCustomizeButton.js var btn = new UE.ui.Button({ name:'dialogbutton' + uiName, title:'dialogbutton' + uiName, //需要添加的額外樣式，指定icon圖標，這里默認使用一個重復的icon cssRules :'background-position: -500px 0;', onclick:function () { //渲染dialog dialog.render(); dialog.open(); } }); return btn; }/*index 指定添加到工具欄上的那個位置，默認時追加到最后,editorId 指定這個UI是那個編輯器實例上的，默認是頁面上所有的編輯器都會添加這個按鈕*/);
代碼如下<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <div class="content"> <h1>測試頁面</h1> 這里面可以寫你自己需要的頁面標簽 </div> <!--頁面中一定要引入internal.js為了能直接使用當前打開dialog的實例變量--> <!--internal.js默認是放到dialogs目錄下的--> <script type="text/javascript" src="../dialogs/internal.js"></script> <script> //可以直接使用以下全局變量 //當前打開dialog的實例變量 alert('editor: '+editor); //一些常用工具 alert('domUtils: '+domUtils); alert('utils: '+utils); alert('browser: '+browser); dialog.onok = function (){ alert("我點擊了確定"); editor.execCommand('inserthtml', '<span>html code</span>'); dialog.close(); }; dialog.oncancel = function () { alert("我點擊了取消"); editor.execCommand('inserthtml', '<span>html code</span>'); }; </script> </body> </html>1.官方demo沒有說明點擊確定事件如何在html執行。添加上面的dialog.onok事件。
2.如果不想使用工具欄的icon樣式，可以再修改
ueditor\themes\default\images\icons.png和icons.gif
再使用background-position定位；
3.最后一步記得在你使用ueditor編輯器的頁面引入這個js文件。他會自動在你的工具欄添加你自定義Dialog
這個是ueditor的幫助文檔。
http://ueditor.baidu.com/doc/#COMMAND.LIST