具体实现我是参考官方给的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是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
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
时间： 2024-10-20 12:38:47