实现UE添加自定义按钮之添加菜单
1.ueditor.config.js配置文件中配置
2.在ueditor.all.js配置文件中配置点开的的弹框位置
3.在ueditor1_4_3-utf8-jsp\themes\default\css\ueditor.css的配置文件中，配置点开窗口弹框的大小和自定义图标的图案
4.在ueditor1_4_3-utf8-jsp\dialogs文件夹下定义自己的html弹框的样式
4.1以我的为例，ueditor1_4_3-utf8-jsp\dialogs\mymenu下新建mymenu.html文件
4.2 新建ueditor1_4_3-utf8-jsp\dialogs\mydownfile\mydownfile.html文件
注意名字一定要一致，例子中自定义的名字为：mydownfile、mymenu
1.ueditor.config.js配置文件中配置
toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'uploadphoto','emotion', 'map', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'help', 'drafts','mydownfile','mymenu'
]],labelMap:{
'anchor':'', 'undo':'','mydownfile':'添加下载专区链接','mymenu':'添加菜单链接'
}
2.在ueditor.all.js配置文件中配置点开的的弹框位置
iframeUrlMap位置、dialogBtns位置
var iframeUrlMap = {
'charts': '~/dialogs/charts/charts.html',
'mydownfile':'~/dialogs/mydownfile/mydownfile.html',
'mymenu':'~/dialogs/mymenu/mymenu.html',
};
var dialogBtns = {
noOk:['searchreplace', 'help', 'spechars', 'webapp','preview'],
ok:['attachment', 'anchor', 'link', 'insertimage', 'map', 'gmap', 'insertframe', 'wordimage',
'insertvideo', 'insertframe', 'edittip', 'edittable', 'edittd', 'scrawl', 'template', 'music', 'background', 'charts','mydownfile','mymenu']
};
3.在ueditor1_4_3-utf8-jsp\themes\default\css\ueditor.css的配置文件中，配置点开窗口弹框的大小和自定义图标的图案
.edui-default .edui-toolbar .edui-for-mydownfile .edui-icon {
background:url(../images/myimages/icon_downfile2.png) no-repeat left 2px;
}
.edui-default .edui-toolbar .edui-for-mymenu .edui-icon {
background:url(../images/myimages/icon_menu1.png) no-repeat left 2px;
}
.edui-default .edui-for-mydownfile .edui-dialog-content {
width: 1000px;
height: 450px;
}
.edui-default .edui-for-mymenu .edui-dialog-content {
width: 500px;
height: 420px;
}
4.在ueditor1_4_3-utf8-jsp\dialogs文件夹下定义自己的html弹框的样式
4.1以我的为例，ueditor1_4_3-utf8-jsp\dialogs\mymenu下新建mymenu.html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="/public/ms/javascripts/jquery-1.9.1.min.js" type="text/javascript" charset="${_response_encoding}"></script>
<script type="text/javascript" src="../internal.js"></script>
<link rel="stylesheet" media="screen" href="/public/ms/stylesheets/zTreeStyle.min.css">
<script src="/public/ms/javascripts/jquery.ztree.core-3.5.min.js" type="text/javascript" charset="${_response_encoding}"></script>
<link rel="stylesheet" media="screen" href="/public/ms/stylesheets/jquery-jbox/2.3/Skins/Blue/jbox.css">
<script src="/public/ms/javascripts/jquery.ztree.excheck-3.5.min.js" type="text/javascript" charset="${_response_encoding}"></script>
<script src="/public/ms/javascripts/jquery.jBox-2.3.min.js" type="text/javascript" charset="${_response_encoding}"></script>
<script src="/public/ms/javascripts/jquery.jBox-zh-CN.min.js" type="text/javascript" charset="${_response_encoding}"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
color: #838383;
}
table {
font-size: 12px;
line-height: 30px
}
.txt {
width: 300px;
height: 21px;
line-height: 21px;
border: 1px solid #d7d7d7;
}
.mytable {
position: fixed;
/*固定作用*/
_position: absolute;
/* 把导航栏位置定义为绝对位置 关键*/
_top: expression(documentElement.scrollTop + "px");
/* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
z-index: 9999;
/* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
}
</style>
</head>
<body style="padding:0 0 10px 10px;">
<div class="mytable" style="height:100px;padding:10px 10px 0 10px;left:10px;background:#fff;top:0;">
<table>
<tr>
<td><label for="text"> <var id="lang_input_text"></var></label>
</td>
<td>
<input class="txt" id="text" type="text" />
</td>
</tr>
<tr>
<td><label for="title" style="wdith:60px;"> <var id="lang_input_title"></var></label></td>
<td>
<input class="txt" id="title" type="text" /></td>
</tr>
<tr>
<td colspan="2">
<label for="target"><var id="lang_input_target"></var></label>
<input id="target"