实现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" 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>实现UE添加自定义按钮之添加菜单的更多相关文章
- jqgrid 在表格底部添加自定义按钮
往往我们需要在jqgrid底部的分页行中添加一些自定义按钮,效果如下: 上图中,三个按钮均是自定义添加上的. 1.要新增自定义按钮在表格底部,仍离不开分页div,需要给jqgrid绑定分页方法 2.由 ...
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- Qt Style Sheet实践（一）：按钮及关联菜单
导读 正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离.这样,美工设计人员和逻辑实现者可以各司其职而不受干 ...
- Qt Style Sheet实践（一）：按钮及关联菜单（24K纯开源，一共四篇）
导读 正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离.这样,美工设计人员和逻辑实现者可以各司其职而不受干 ...
- Dynamics CRM2013 任务列表添加自定义按钮
任务列表的command bar 上面添加自定义按钮如下 要注意的是此处的列表不是任务实体而是活动实体,如果你是在任务实体的home栏上面加那你永远看不见按钮的显示,但如果是要在任务的表单界面上加按钮 ...
- Dynamics 365 CRM 添加自定义按钮
在添加自定义按钮之前,我们需要下载这个工具 RibbonWorkbench, 它是专门针对自定义命令栏和Ribbon区域. 下载之后是一个zip压缩包. 怎样安装RibbonWorkbench: Se ...
- ckeditor添加自定义按钮整合swfupload实现批量上传图片
ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮,由于ckeditor只能上传一张图片,如果要上传多张图片就要结合ckfinder,而ckfinde ...
- Bootstrap-CL：按钮下拉菜单
ylbtech-Bootstrap-CL:按钮下拉菜单 1.返回顶部 1. Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉 ...
- 2019-2-2-VisualStudio-扩展开发-添加菜单
title author date CreateTime categories VisualStudio 扩展开发 添加菜单 lindexi 2019-02-02 15:35:18 +0800 201 ...
随机推荐
- Spring Cloud Sleuth服务跟踪
监控 使用zipkin(https://zipkin.io/) 监控服务构建: (普通的springBoot项目) <!--引入的zipkinServer依赖--> <depende ...
- Codeforces 627D Preorder Test(二分+树形DP)
题意:给出一棵无根树,每个节点有一个权值,现在要让dfs序的前k个结点的最小值最大,求出这个值. 考虑二分答案,把>=答案的点标记为1,<答案的点标记为0,现在的任务时使得dfs序的前k个 ...
- BZOJ 1835 基站选址(DP+线段树)
# include <cstdio> # include <cstring> # include <cstdlib> # include <iostream& ...
- Telnet 远程控制
Telnet 远程控制 一.挂第3张盘,进入RPMS中: 挂盘:mount /dev/cdrom /mnt/cdrom 路径:cd /mnt/cdrom/RedHat/RPMS 二.将rpm文件复制到 ...
- 【BZOJ4300】绝世好题（动态规划）
[BZOJ4300]绝世好题(动态规划) 题面 BZOJ Description 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=l ...
- 洛谷 P3241 [HNOI2015]开店 解题报告
P3241 [HNOI2015]开店 题目描述 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱. 这样的想法当然非 ...
- 洛谷 P2053 [SCOI2007]修车 解题报告
P2053 [SCOI2007]修车 题目描述 同一时刻有N位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同的车进行维修所用的时间是不同的.现在需要安排这M位技术 ...
- 【原创】【1】rich editor系列教程。前期准备，兼容
[1]前期准备,兼容 索引目录:http://www.cnblogs.com/henryli/p/3439642.html rich editor的原理无非是启用iframe的编辑模式或者div的co ...
- html5 video，audio控制播放多次，请求/监测全屏状态
audio 播放 Element.play(); 如果在播放中,调用play,从头播放,则需要先load,同时绑定结束方法,如 Element.addEventListener('ended',f ...
- 【learning】矩阵树定理
问题描述 给你一个图(有向无向都ok),求这个图的生成树个数 一些概念 度数矩阵:\(a[i][i]=degree[i]\),其他等于\(0\) 入度矩阵:\(a[i][i]=in\_degree[i ...