ueditor1.4.3二次开发添加自定义Dialog

来源：互联网发布：防伪标签制作软件编辑：程序博客网时间：2024/05/29 13:40

具体实现我是参考官方给的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是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);

html代码如下

<!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

0 0