具体实现我是参考官方给的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