实现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 ...
随机推荐
- BZOJ 4034 树上操作(树的欧拉序列+线段树)
刷个清新的数据结构题爽一爽? 题意: 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x ...
- 【bzoj3130】[Sdoi2013]费用流 二分+网络流最大流
题目描述 Alice和Bob做游戏,给出一张有向图表示运输网络,Alice先给Bob一种最大流方案,然后Bob在所有边上分配总和等于P的非负费用.Alice希望总费用尽量小,而Bob希望总费用尽量大. ...
- Jmeter介绍+安装
JMeter介绍 JMeter 是Apache 基金会Jakarta 上的一个纯Java 开源项目,起初用于基于Web 的压力测试(pressure test),后来其应用范围逐渐扩展到对文件传输FT ...
- robot framework Selenium2关键字介绍
*** Settings *** Library Selenium2Library *** Keywords *** Checkbox应该不被选择 [Arguments] ${locator} Che ...
- TCP/IP四层协议模型与ISO七层模型
TCP/IP四层协议模型与ISO七层模型 在世界上各地,各种各样的电脑运行着各自不同的操作系统为大家服务,这些电脑在表达同一种信息的时候所使用的方法是千差万别.就好像圣经中上帝打乱了各地人的口音,让他 ...
- [JSOI2007]字符加密 后缀数组
题面:洛谷 题解: 我们考虑,如果可以将环上每个长度为len的串都提取出来,再做个排序,那这题我们就做出来了! 但是提取$n^2$,怎么办? 考虑破环成链,再扩充为原来的2倍. 然后直接做后缀排序,把 ...
- Java 工作2年后需要达到怎么样的技术水平
有人回答说这只能是大企业或者互联网企业的工程师才能拿到.也许是的,小公司或者非互联网企业拿两万的不太可能是码农了,应该是已经转管理后才有可能.还有区域问题,这个不在我的考虑范围内,因为除了北上广深杭, ...
- scala（三）
一.面向对象编程——类 1.定义一个简单的类 class HelloWorld { private var name = "leo" def sayHello() { print( ...
- NOIP2017 Day2 T2 宝藏（状压DP）
$O(n*3^n)$好难想...还有好多没见过的操作 令$f[i][j]$表示最深深度为i,点的状态为j的最小代价,每次枚举状态$S$后,计算$S$的补集里的每个点与S里的点的最小连边代价,再$O(3 ...
- 4.UiCollection API 详细介绍
一.UiCollection类介绍 UiCollection类两大功能:从集合中查找对象:获取某种搜索条件组件的数量 1.UiCollection类说明 1)UiCollection是UiObject ...