实现UE添加自定义按钮之添加菜单
2017-11-21 14:48
309 查看
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文件
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" type="checkbox" />
</td>
</tr>
<tr>
<td colspan="2" id="msg"></td>
</tr>
</table>
</div>
<div style="margin-top:110px;">
<table>
<tr>
<td colspan="2">
<div class="controls">
<div id="menuTree" name="menuTree" class="ztree" style="margin-top:3px;float:left;"></div>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var tree;
$(function() {
showAllMenu();
String.prototype.trim = function ()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
});
//add by zhanghj
//显示所有菜单
function showAllMenu() {
$.ajax({
type: "post",
url: "/FAQController/getAllManagerMenu",
dataType: "json",
success: function(data) {
if(data.msg == 'success') {
var menuList = JSON.stringify(data.menuList);
//ztree
var setting = {
check: { enable: true, nocheckInherit: true },
view: { selectedMulti: false },
data: { simpleData: { enable: true, id: 'id', pId: 'pId', name: 'name', status: 'status' } },
callback: {
beforeClick: function(id, node) {
tree.checkNode(node, !node.checked, true, true);
return false;
}
},
callback: {
onCheck: zTreeOnCheck
}
};
// 用户-菜单
var zNodes = JSON.parse(menuList);
// 初始化树结构
tree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
// 默认展开全部节点
tree.expandAll(true);
} else {
alert(data.msg);
}
},
error: function() {
alert(data.msg);
}
});
dialog.onok = handleDialogOk;
}
//选择点击时触发，自动填充标题和文本内容
function zTreeOnCheck(event, treeId, treeNode) {
if(treeNode.checked) {
selectedMenuids = beforeCheck();
var selectedLength = selectedMenuids.length;
if(selectedLength > 1) {
treeNode.checked = false;
//获取所有的子节点并设置为未选中
getAllChildrenNodes(treeNode);
if(treeNode.isParent != true) {
//选择的是子节点，判断已选的和先选的父ID是否相同
var nodes = tree.getCheckedNodes();
var countTotal = 0;
for(var i = 0; i < nodes.length; i++) {
if(nodes[i].isParent != true && nodes[i].pId != treeNode.pId) {
++countTotal;
}
}
if(countTotal >= 1) {
//如果再选的为父节点不同，设置父节点为未选中状态
treeNode.getParentNode().checked = false;
tree.updateNode(treeNode.getParentNode());
}
}
alert("您只能选一个子菜单！");
return false;
}
var resultStr = '管理人服务平台' + '-';
resultStr += treeNode.getParentNode().name + '--';
resultStr += treeNode.name;
$("#text").val(resultStr);
$("#title").val(resultStr);
}
};
//获取所有子节点并设置为未勾选
function getAllChildrenNodes(treeNode) {
if(treeNode.isParent) {
var childrenNodes = treeNode.children;
if(childrenNodes) {
for(var i = 0; i < childrenNodes.length; i++) {
//设置子节点为未选中
childrenNodes[i].checked = false;
//更新子节点的状态
tree.updateNode(childrenNodes[i]);
getAllChildrenNodes(childrenNodes[i]);
}
}
}
}
function beforeCheck() {
var nodes = tree.getCheckedNodes();
var selectedMenuids = [];
for(var i = 0; i < nodes.length; i++) {
if(nodes[i].isParent != true) {
//只取子节点
selectedMenuids.push(nodes[i].id);
}
}
return selectedMenuids;
}
//点击OK调用方法
function handleDialogOk() {
selectedMenuids = beforeCheck();
var selectedLength = selectedMenuids.length;
if(selectedLength > 1) {
alert("您只能选一个子菜单！");
return false;
}
if(selectedLength < 1) {
alert("您还没有选择菜单！");
return false;
}
if(selectedLength == 1) {
/* showText=showText.substr(0,showText.length-1);
var myArray = showText.split(",");
var resultStr ='管理人服务平台'+'-';
for(var i=0;i<myArray.length;i++){
if(i!=myArray.length-1){
resultStr+=myArray[i]+'--';
}else{
resultStr+=myArray[i];
}
} */
var text = $("#text").val();
var title = $('#title').val();
if(text.trim().length <= 0) {
alert("文本内容不能为空，请填写文本内容！");
return false;
}
var targetType = '_self';
if($('#target').is(':checked')) {
targetType = '_blank';
}
var myhtml = "<a title='" + title + "' class='mymenu' style='color:#0000EE;font-size:14px;text-decoration:underline;' href='#' target='" + targetType + "' id='" + selectedMenuids + "'>" + text.trim() + "</a>";
editor.execCommand('insertHtml', myhtml);
dialog.close();
}
}
</script>
</body>
</html>4.2 新建ueditor1_4_3-utf8-jsp\dialogs\mydownfile\mydownfile.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 src="/public/ms/javascripts/jquery_easyui/jquery.easyui.min.js" type="text/javascript" charset="${_response_encoding}"></script>
<script src="/public/ms/javascripts/jquery_easyui/easyui-lang-zh_CN.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/jquery_easyui/easyui.css">
<link rel="stylesheet" media="screen" href="/public/ms/stylesheets/jquery_easyui/icon.css">
<link rel="stylesheet" media="screen" href="/public/ms/stylesheets/bootstrap.min.css">
<script src="/public/ms/javascripts/bootstrap.min.js" type="text/javascript" charset="${_response_encoding}"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
color: #838383;
}
.mytable {
font-size: 12px;
margin-right: 10px;
margin-left: 10px;
line-height: 30px;
margin-top: 10px;
}
.txt {
width: 300px;
height: 21px;
line-height: 21px;
border: 1px solid #d7d7d7;
}
.first_td {
width: 74px;
}
#text {
width: 600px;
}
#title {
width: 600px;
}
</style>
</head>
<body>
<div class="mytable">
<table class="">
<tr>
<td><label for="text"> <var id="lang_input_text"></var></label></td>
<td colspan="2"><input class="txt" id="text" type="text" /></td>
</tr>
<tr>
<td><label for="title"> <var id="lang_input_title"></var></label></td>
<td colspan="2"><input class="txt" id="title" type="text" /></td>
</tr>
<tr>
<td class="first_td"> <label class="control-label">文件名:</label></td>
<!-- <td> <input type="text" name="fileNameSearch" id="fileNameSearch" class="div_width"></td> -->
<td> <input type="text" name="fileNameSearch" id="fileNameSearch" class="txt" placeholder="请输入要查询的内容">
<span style="color:red">(此输入框为根据下载的文件名进行模糊匹配)</span>
</td>
<td><input id="btnSubmitS" class="btn btn-primary" type="submit" onclick="showDownFiles()" value="查询" /></td>
</tr>
<tr>
<td colspan="3">
<table id="flowTable" class="easyui-datagrid" data-options="fitColumns:true,singleSelect:true"></table>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(function() {
showDownFiles();
dialog.onok = handleDialogOk;
String.prototype.trim = function ()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
});
var selectedIDs = new Array();
var selectedNames = new Array();
function handleDialogOk() {
if(selectedIDs.length > 1) {
alert("您只能选一个下载专区的文件！");
return false;
}
if(selectedIDs.length < 1) {
alert("您还没有选择载专区的文件！");
return false;
}
if(selectedIDs.length == 1) {
var text = $("#text").val();
var title = $('#title').val();
if(text.trim().length <= 0) {
alert("文本内容不能为空，请填写文本内容！");
return false;
}
var filename = "《" + text.trim(); + "》";
var myhtml = "<a title='"+title+"' class='mydownloadfile' style='color:#0000EE;font-size:14px;text-decoration:underline;' href='#' id='" + selectedIDs + "'>" + filename + "</a>";
editor.execCommand('insertHtml', myhtml);
dialog.close();
}
}
function showDownFiles() {
var fileNameSearch = $('#fileNameSearch').val();
$('#flowTable').datagrid({
url: '/FAQController/getFileDownloadCenterFile',
queryParams: { fileNameSearch: fileNameSearch },
singleSelect: true,
selectOnCheck: true,
checkOnSelect: true,
rownumbers: true,
width: '1000',
columns: [
[{ field: 'id', checkbox: true },
{ field: 'fileName', title: '文件名称', width: '400' },
{ field: 'fileUrl', title: '文件地址', width: '600' }
]
],
onSelect: function(index, row) {
addItem(row.id);
},
onUnselect: function(index, row) {
removeItem(row.id)
},
onSelectAll: function(rows) {
addAll(rows);
},
onUnselectAll: function(rows) {
removeAll(rows);
},
onLoadSuccess: function(data) {
var myrows = $('#flowTable').datagrid('getRows');
for(var i = 0; i < myrows.length; i++) {
var selectedIDsLength = selectedIDs.length;
for(var j = 0; j < selectedIDsLength; j++) {
if(myrows[i].id == selectedIDs[j]) {
var index = $('#flowTable').datagrid('getRowIndex', myrows[i]);
$('#flowTable').datagrid('selectRow', index);
}
}
}
//给搜索文件名字赋值
$('#fileNameSearch').val(data.fileNameSearch);
},
pagination: true
});
//设置页码分页显示
$('#flowTable').datagrid('getPager').pagination({
pageSize: 10,
pageNumber: 1,
pageList: [10, 20, 30, 40, 50],
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
});
}
//add onSelect
function addItem(id) {
var arrs = selectedIDs.join();
if(arrs.indexOf(id) == -1) {
selectedIDs.push(id);
}
var row = $('#flowTable').datagrid('getSelected');
if(row) {
$("#text").val(row.fileName);
$("#title").val(row.fileName);
}
}
//add current page
function addAll(rows) {
for(var i = 0; i < rows.length; i++) {
var arrs = selectedIDs.join();
if(arrs.indexOf(rows[i].id) == -1) {
selectedIDs.push(rows[i].id);
}
}
}
//remove unSelect
function removeItem(id) {
var arrs = selectedIDs.join();
var indexTmp = arrs.indexOf(id);
if(indexTmp != -1) {
for(var i = 0; i < selectedIDs.length; i++) {
if(selectedIDs[i] == id) {
selectedIDs.splice(i, 1);
}
}
}
}
//remove current page
function removeAll(rows) {
for(var i = 0; i < rows.length; i++) {
var arrs = selectedIDs.join();
var indexTmp = arrs.indexOf(rows[i].id);
if(indexTmp != -1) {
for(var j = 0; j < selectedIDs.length; j++) {
if(selectedIDs[j] == rows[i].id) {
selectedIDs.splice(j, 1);
}
}
}
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于在自定义View中添加Button按钮以及实现点击事件
- 黄聪：如何给wordpress的编辑器添加一个自定义按钮，并且实现插入功能
- Android 6.0开发实现关机菜单添加重启按钮的方法
- iOS 自定义UITableViewCell上添加UIButton按钮如何确定点击了哪一行，代码块实现
- IDocHostUIHandler::ShowContextMenu添加自定义菜单的另类实现
- iOS 自定义UITableViewCell上添加UIButton按钮如何确定点击了哪一行，代码块实现
- 给EditCtrl添加自定义菜单并实现Copy，Cut和Paste功能
- iOS 自定义UITableViewCell上添加UIButton按钮实现选中的是哪个按钮对应的cell，用代理实现。
- 来实现android自定义的menu菜单之二：为自定义menu中的线性布局添加事件
- IDocHostUIHandler::ShowContextMenu添加自定义菜单的另类实现
- 图形的绘制，如何使用自定义画笔（颜色，线宽，线形）。如何为程序中添加选项菜单和选项设置对话框，如何使用标准颜色对话框，如何使用字体对话框，在选项对话框中实现预览功能。实现选项对话框和窗口类中的数据交换。如何改变对话框和控件的背景色，如何改变控件的文本颜色，
- 用COM方法在CAD2006中实现添加自定义菜单
- unity 菜单按钮添加及相应窗口的实现
- iOS 自定义UITableViewCell上添加UIButton按钮如何确定点击了哪一行，代码块实现
- FckEditor工具栏添加自定义按钮，并实现点击按钮的功能
- Android中为Button自定义按钮的按下效果的实现方法
- react实现点击按钮添加一项(开始显示一项默认的) 点击每项按钮添加对应的小项
- 微信开发之添加自定义3*5菜单
- 标签布局，实现添加多个button自动换行，可自定义许多属性
- android自定义简单Adapter-实现每列按钮事件