ueditor是百度开发的开源的富文本编辑器, 支持类似域Excel的表格操作
| 文件名称 | 文件内容分 |
|---|---|
| ueditor.all.js | 源码主文件 |
| ueditor.config.js | 配置文件, 配置属性白名单 |
| zh-cn.js,en.js | 多语言文件 |
| ueditor.css | 样式信息 |
可以设置单元格的属性, 比如有数字,字符, 百分比等等.
右键,添加单元格属性
可以选择对应的属性,
确认后可以查看属性
首先添加上菜单
在 dialogBtns里面维护好对应的操作
添加到右键菜单, 找到右键菜单代码
一个菜单选项如下
菜单组如下, 里面包含了子菜单
找到自己想要放的位置, 加上设置单元格属性的菜单
这里点击我们会打开一个窗口, 没有这个需求就可以直接调用 command, command维护后面会讲到
//单元格类型
{
label:lang.setcellattribute,
cmdName:'setcellattribute',
exec:function () {
if ( UE.ui['setcellattribute'] ) {
new UE.ui['setcellattribute']( this );
}
this.getDialog('setcellattribute').open();
}
},
组件添加上要事件, 在其他组件添加事件代码的区域
/**设置数据类型**/
UE.plugins['setcellattribute'] = function () {
UE.commands['template'] = {
execCommand:function (cmd, obj) {
obj.html && this.execCommand("inserthtml", obj.html);
}
};
this.addListener("click", function (type, evt) {
var el = evt.target || evt.srcElement,
range = this.selection.getRange();
var tnode = domUtils.findParent(el, function (node) {
if (node.className && domUtils.hasClass(node, "ue_t")) {
return node;
}
}, true);
tnode && range.selectNode(tnode).shrinkBoundary().select();
});
this.addListener("keydown", function (type, evt) {
var range = this.selection.getRange();
if (!range.collapsed) {
if (!evt.ctrlKey && !evt.metaKey && !evt.shiftKey && !evt.altKey) {
var tnode = domUtils.findParent(range.startContainer, function (node) {
if (node.className && domUtils.hasClass(node, "ue_t")) {
return node;
}
}, true);
if (tnode) {
domUtils.removeClasses(tnode, ["ue_t"]);
}
}
}
});
};
设置打开的窗口的页面,在iframeUrlMap添加信息
添加信息如下
'setcellattribute':'~/plugin/ueditor/dialogs/table/setcellattribute.html',
这个时候打开窗口就会显示 setcellattribute.html 页面, 在页面点击确定调用了一个命令
command区域维护一下这个command
//数据类型
UE.commands['setcellattribute'] = {
queryCommandState: function () {
return getTableItemsByRange(this).table ? 0 : -1
},
execCommand: function (cmd,dataTypeCode) {
var me = this,
ut = getUETableBySelected(me);
if (!ut) {
var start = me.selection.getStart(),
cell = start && domUtils.findParentByTagName(start, ["td", "th", "caption"], true);
if (cell) {
var row = cell.parentElement;
//单元格是表头特殊处理
if (domUtils.hasClass(row, "firstRow")) {
HandTableHeadCellAttribute(cell,dataTypeCode);
} else {
SetCellAttribute(cell,dataTypeCode);
}
}
} else {
utils.each(ut.selectedTds, function (cell) {
var row = cell.parentElement;
//单元格是表头特殊处理
if (domUtils.hasClass(row, "firstRow")) {
HandTableHeadCellAttribute(cell,dataTypeCode);
} else {
SetCellAttribute(cell,dataTypeCode);
}
});
}
}
};
上面调用function的如下, 这里面处理的cell的 cellattribute属性, 之后要在 ueditor.config.js 配置属性白名单
function HandTableHeadCellAttribute (node, cellattribute) {
var nodeId = $(node).attr("id");
//全局表搜索列
var row = node.parentElement;
var table = row.parentElement;
//遍历行
$.each(table.rows, function (k, v) {
//拼接ID
var cellId = "";
if (k === 0) {
cellId = nodeId;
} else {
cellId = nodeId + k;
}
//取出所需的值
var cell = UE.dom.domUtils.filterNodeList(v.cells, function (node) {
if ($(node).attr("id") &&
$(node).attr("id") === cellId) {
return true;
}
return false;
});
if (cell &&
$(cell).attr("dimtype") !== "CD" &&
$(cell).attr("dimtype") !== "RD") {
SetCellAttribute(cell,cellattribute);
}
});
}
function SetCellAttribute(cell,cellattribute) {
//设置数据类
cell.setAttribute("cellattribute", cellattribute);
if(cellattribute === 'date') {
//日期类型设置日历控件
cell.setAttribute("datepicker", "Y");
} else {
domUtils.removeAttributes(cell,'datepicker');
}
//百分比类型,设置百分比显示
if(cellattribute === 'percentage') {
cell.setAttribute("isshowpercent",'Y');
} else {
domUtils.removeAttributes(cell,'isshowpercent');
}
}
包含了页面初始化渲染的处理逻辑, 还有点击确定处理逻辑
<#include "../../../../include/header.html">
<body>
<script>
var viewModel = kendo.observable({
data: {},
confirm : function () {
},
clearAll : function () {
viewModel.data.set("cellAttribute", null);
}
});
var dateTypeSource = [
{
meaning: "数字",
value: "number"
}, {
meaning: "字符",
value: "string"
}, {
meaning: "日期",
value: "date"
},{
meaning:'百分比',
value : 'percentage'
}
];
</script>
<div id="page_content">
<span id="echo_info" class="pull-left" style="color:#F00"></span>
<div id="queryPanel" style="margin-right:5px;padding-bottom:10px; padding-top: 20px; text-align: center;">
<div id="form">
<input type="text" id="cellAttribute" data-bind="value: data.cellAttribute"/>
<script>
$("#cellAttribute").kendoComboBox({
dataTextField: "meaning",
dataValueField: "value",
dataSource: dateTypeSource
}).data("kendoComboBox");
</script>
</div>
<script>kendo.bind($('#form'),viewModel);</script>
</div>
</div>
<script type="text/javascript" src="${base.contextPath}/lib/ueditor/dialogs/internal.js"></script>
<script type="text/javascript">
window.isArea;
var isArea = createArea(editor);
echoCellAttribute(isArea);
/**
* echoCellAttribute : 显示数据类型
*
* @author yanqiang.jiang@hand-china.com
* @date 2019/02/20 15:39
* @param isArea
* @return
* @since JDK 1.8
*/
function echoCellAttribute(isArea) {
var id;
var cellattribute = '';
if ($.isEmpty(isArea)) {
var start = editor.selection.getStart();
var node = UE.dom.domUtils.findParentByTagName(start, ["td", "th"], true);
id = $(node).attr("id");
cellattribute = $(node).attr("cellattribute");
} else {
id = isArea.split(":")[0];
var cellattribute =$(editor.getContent()).find("#"+id).attr("cellattribute");
}
viewModel.data.set("cellAttribute", cellattribute);
}
dialog.onok = function () {
var groupCode = parent.ue.groupCode;
var formCode = parent.ue.form_code;
var cellAttribute = $("#cellAttribute").val();
if ($.isEmpty(isArea)) {
//若用户没选择区域，则用户有可能要选择表项
var start = editor.selection.getStart();
try {
var node = UE.dom.domUtils.findParentByTagName(start, ["td", "th"], true);
setCellAttributeListToMap(node, groupCode, formCode, cellAttribute);
} catch (e) {
console.log('warn:' + '此表单未选择表项或表项区域!');
}
} else {
//用户选择的是区域,先虚拟出该区域的所有位置标识
var selectedArea = getSelectArea(isArea);
$.each(selectedArea, function (k, v) {
var node = $(editor.getContent()).find("#"+v)[0];
setCellAttributeListToMap(node, groupCode, formCode, cellAttribute);
});
}
editor.execCommand('setcellattribute',cellAttribute);
};
/**
*
*处理用于所选区域, 如果是表头则是整个区域
*
**/
function setCellAttributeListToMap(node, groupCode, formCode, cellAttribute) {
//判断n是不是第一行
var row = node.parentElement;
if (domUtils.hasClass(row, "firstRow")) {
var nodeId = $(node).attr("id");
//全局表搜索列
var table = row.parentElement;
//遍历行
$.each(table.rows, function (k, v) {
//拼接ID
var cellId= "";
if(k === 0){
cellId = nodeId;
} else {
cellId = nodeId + k;
}
//取出所需的值
var cell = $(editor.getContent()).find("#"+cellId)[0];
if(cell&&
$(cell).attr("dimtype") !== "CD" &&
$(cell).attr("dimtype") !== "RD"){
setCellAttributeToMap(cell, groupCode, formCode, cellAttribute);
}
});
} else {
setCellAttributeToMap(node, groupCode, formCode, cellAttribute);
}
}
function setCellAttributeToMap(cell, groupCode, formCode, cellAttribute) {
var tabCode = $(cell).attr("tablecode");
var locCode = $(cell).attr("id");
var key = groupCode + "_" + formCode + "_" + tabCode + "_" + locCode;
var value = cellAttribute;
if(parent.ue.cellAttributeMap) {
parent.ue.cellAttributeMap.set(key, value);
}
}
/**
* 获取用户所选区域 例如 A1:B3
* @param ue ueditor对象
* @returns {string}
*/
function createArea(ue) {
var area = '';
var html = ue.getContent();
//将html字符串转化成jquery对象
var htmlObj = $(html);
//获取所有的td对象
var tds = htmlObj.find("td.selectTdClass");
if(!$.isEmpty(tds) && tds.length > 0){
var minid = tds[0].id;
var maxid = tds[tds.length-1].id;
area = minid + ':' + maxid;
}
return area;
}
</script>
</body>
</html>
zh-cn.js 和en.js维护上中文和英文
在labelMap添加
内容
在contextMenu添加
内容
最后添加菜单对象, 这李是一个简单的菜单, static为空即可, 添加到页面上 UE.I18N[‘zh-cn’] 的后面
'setcellattribute':{
'static' :{
}
},
修改英文类似操作
打开 ueditor.css
在配置 .edui-icon 的CSS的地方添加
.edui-default .edui-for-setcellattribute .edui-icon {
background-position: -700px -40px;
}
在配置 .edui-dialog-content 的CSS的地方添加如下
/*数据类型*/
.edui-default .edui-for-setcellattribute .edui-dialog-content {
width: 240px;
height: 150px;
}
之前在 ueditor.all.js 配置 command的时候使用了cell的 cellattribute 属性现在添加上白名单
修改 ueditor.config.js
在withList找到 td
在td里面添加 cellattribute即可
