|
|
/**
|
|
|
* Created with JetBrains PhpStorm.
|
|
|
* User: xuheng
|
|
|
* Date: 12-12-19
|
|
|
* Time: 下午4:55
|
|
|
* To change this template use File | Settings | File Templates.
|
|
|
* 上面这部分是代码的文件头注释，包含了创建文件所使用的编辑器（JetBrains PhpStorm）、作者（xuheng）、创建日期以及关于修改模板相关的提示信息等，主要用于代码的溯源和基本信息记录
|
|
|
*/
|
|
|
// 定义一个立即执行函数，用于创建一个独立的作用域，避免变量污染全局环境
|
|
|
(function () {
|
|
|
// 获取页面中id为J_title的元素，通常这些元素可能是与表格编辑相关的表单元素（如复选框等），以下类似的获取操作同理
|
|
|
var title = $G("J_title"),
|
|
|
titleCol = $G("J_titleCol"),
|
|
|
caption = $G("J_caption"),
|
|
|
sorttable = $G("J_sorttable"),
|
|
|
autoSizeContent = $G("J_autoSizeContent"),
|
|
|
autoSizePage = $G("J_autoSizePage"),
|
|
|
tone = $G("J_tone"),
|
|
|
me,
|
|
|
preview = $G("J_preview");
|
|
|
|
|
|
// 定义一个名为editTable的构造函数，用于创建编辑表格相关功能的对象实例
|
|
|
var editTable = function () {
|
|
|
me = this;
|
|
|
// 调用对象自身的init方法进行初始化操作
|
|
|
me.init();
|
|
|
};
|
|
|
// 将editTable的原型对象进行扩展，添加一系列方法，用于实现具体的表格编辑相关功能
|
|
|
editTable.prototype = {
|
|
|
// init方法，用于初始化各种状态、绑定事件等操作
|
|
|
init:function () {
|
|
|
// 创建一个UE.ui.ColorPicker实例，用于选择颜色，传入编辑器对象（这里的editor应该是外部定义好的编辑器相关对象）
|
|
|
var colorPiker = new UE.ui.ColorPicker({
|
|
|
editor:editor
|
|
|
}),
|
|
|
// 创建一个UE.ui.Popup实例，用于弹出颜色选择器相关的界面，传入编辑器对象，并将颜色选择器作为其内容
|
|
|
colorPop = new UE.ui.Popup({
|
|
|
editor:editor,
|
|
|
content:colorPiker
|
|
|
});
|
|
|
|
|
|
// 根据编辑器中"inserttitle"命令的状态（-1可能表示未启用之类的情况）来设置title复选框的选中状态
|
|
|
title.checked = editor.queryCommandState("inserttitle") == -1;
|
|
|
titleCol.checked = editor.queryCommandState("inserttitlecol") == -1;
|
|
|
caption.checked = editor.queryCommandState("insertcaption") == -1;
|
|
|
sorttable.checked = editor.queryCommandState("enablesort") == 1;
|
|
|
|
|
|
// 获取编辑器中"enablesort"命令的状态
|
|
|
var enablesortState = editor.queryCommandState("enablesort"),
|
|
|
disablesortState = editor.queryCommandState("disablesort");
|
|
|
|
|
|
// 根据"enablesort"和"disablesort"命令的状态来设置sorttable复选框的选中和禁用状态，并设置提示标题（如果两个状态都小于0可能表示不可用情况等）
|
|
|
sorttable.checked =!!(enablesortState < 0 && disablesortState >=0);
|
|
|
sorttable.disabled =!!(enablesortState < 0 && disablesortState < 0);
|
|
|
sorttable.title = enablesortState < 0 && disablesortState < 0? lang.errorMsg:'';
|
|
|
|
|
|
// 调用对象自身的方法创建表格，传入相关复选框的选中状态作为参数
|
|
|
me.createTable(title.checked, titleCol.checked, caption.checked);
|
|
|
// 调用对象自身的方法设置表格自动尺寸相关逻辑
|
|
|
me.setAutoSize();
|
|
|
// 调用对象自身的方法设置表格颜色，传入获取到的颜色值作为参数
|
|
|
me.setColor(me.getColor());
|
|
|
|
|
|
// 给title元素绑定点击事件处理函数，点击时调用对象自身的titleHanler方法
|
|
|
domUtils.on(title, "click", me.titleHanler);
|
|
|
// 给titleCol元素绑定点击事件处理函数，点击时调用对象自身的titleColHanler方法
|
|
|
domUtils.on(titleCol, "click", me.titleColHanler);
|
|
|
// 给caption元素绑定点击事件处理函数，点击时调用对象自身的captionHanler方法
|
|
|
domUtils.on(caption, "click", me.captionHanler);
|
|
|
// 给sorttable元素绑定点击事件处理函数，点击时调用对象自身的sorttableHanler方法
|
|
|
domUtils.on(sorttable, "click", me.sorttableHanler);
|
|
|
// 给autoSizeContent元素绑定点击事件处理函数，点击时调用对象自身的autoSizeContentHanler方法
|
|
|
domUtils.on(autoSizeContent, "click", me.autoSizeContentHanler);
|
|
|
// 给autoSizePage元素绑定点击事件处理函数，点击时调用对象自身的autoSizePageHanler方法
|
|
|
domUtils.on(autoSizePage, "click", me.autoSizePageHanler);
|
|
|
|
|
|
// 给tone元素绑定点击事件处理函数，点击时显示颜色选择器弹出框，并定位到tone元素位置
|
|
|
domUtils.on(tone, "click", function () {
|
|
|
colorPop.showAnchor(tone);
|
|
|
});
|
|
|
// 给document文档对象绑定鼠标按下事件处理函数，点击时隐藏颜色选择器弹出框
|
|
|
domUtils.on(document, 'mousedown', function () {
|
|
|
colorPop.hide();
|
|
|
});
|
|
|
// 给颜色选择器添加"pickcolor"事件的监听器，当选择颜色时调用对象自身的setColor方法设置颜色，并隐藏弹出框
|
|
|
colorPiker.addListener("pickcolor", function () {
|
|
|
me.setColor(arguments[1]);
|
|
|
colorPop.hide();
|
|
|
});
|
|
|
// 给颜色选择器添加"picknocolor"事件的监听器，当不选择颜色（比如取消选择）时调用对象自身的setColor方法设置为空颜色，并隐藏弹出框
|
|
|
colorPiker.addListener("picknocolor", function () {
|
|
|
me.setColor("");
|
|
|
colorPop.hide();
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 创建表格的方法，根据传入的是否有标题、标题列、标题说明等参数来构建表格的HTML结构
|
|
|
createTable:function (hasTitle, hasTitleCol, hasCaption) {
|
|
|
var arr = [],
|
|
|
sortSpan = '<span>^</span>';
|
|
|
// 将表格开始标签添加到数组中，后续通过join方法拼接成完整的HTML字符串
|
|
|
arr.push("<table id='J_example'>");
|
|
|
// 如果传入的hasCaption为true，表示有标题说明，则添加标题说明的HTML结构到数组中
|
|
|
if (hasCaption) {
|
|
|
arr.push("<caption>" + lang.captionName + "</caption>")
|
|
|
}
|
|
|
// 如果传入的hasTitle为true，表示有标题行，则添加标题行的HTML结构到数组中
|
|
|
if (hasTitle) {
|
|
|
arr.push("<tr>");
|
|
|
// 如果同时有标题列（hasTitleCol为true），则添加标题列的表头单元格HTML结构到数组中
|
|
|
if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>"); }
|
|
|
// 循环添加5个普通表头单元格的HTML结构到数组中
|
|
|
for (var j = 0; j < 5; j++) {
|
|
|
arr.push("<th>" + lang.titleName + "</th>");
|
|
|
}
|
|
|
arr.push("</tr>");
|
|
|
}
|
|
|
// 循环添加6行表格数据行的HTML结构到数组中
|
|
|
for (var i = 0; i < 6; i++) {
|
|
|
arr.push("<tr>");
|
|
|
if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>") }
|
|
|
for (var k = 0; k < 5; k++) {
|
|
|
arr.push("<td>" + lang.cellsName + "</td>")
|
|
|
}
|
|
|
arr.push("</tr>");
|
|
|
}
|
|
|
// 将表格结束标签添加到数组中
|
|
|
arr.push("</table>");
|
|
|
// 将拼接好的HTML字符串设置为preview元素的innerHTML，用于在页面中显示表格示例
|
|
|
preview.innerHTML = arr.join("");
|
|
|
// 调用对象自身的updateSortSpan方法更新排序相关的显示内容（比如排序箭头等）
|
|
|
this.updateSortSpan();
|
|
|
},
|
|
|
// 处理title复选框点击事件的方法
|
|
|
titleHanler:function () {
|
|
|
var example = $G("J_example"),
|
|
|
frg=document.createDocumentFragment(),
|
|
|
// 获取表格中第一个td单元格的边框颜色，用于后续设置颜色等操作
|
|
|
color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
|
|
|
colCount = example.rows[0].children.length;
|
|
|
|
|
|
// 如果title复选框被选中
|
|
|
if (title.checked) {
|
|
|
// 在表格的第一行插入新行（用于添加标题行）
|
|
|
example.insertRow(0);
|
|
|
// 循环根据表头列数量创建表头单元格元素，并添加到文档片段中
|
|
|
for (var i = 0, node; i < colCount; i++) {
|
|
|
node = document.createElement("th");
|
|
|
node.innerHTML = lang.titleName;
|
|
|
frg.appendChild(node);
|
|
|
}
|
|
|
// 将包含表头单元格的文档片段添加到新插入的第一行中
|
|
|
example.rows[0].appendChild(frg);
|
|
|
|
|
|
} else {
|
|
|
// 如果title复选框取消选中，移除表格的第一行（也就是移除标题行）
|
|
|
domUtils.remove(example.rows[0]);
|
|
|
}
|
|
|
// 调用对象自身的setColor方法设置表格颜色，传入获取到的颜色值
|
|
|
me.setColor(color);
|
|
|
// 调用对象自身的updateSortSpan方法更新排序相关的显示内容
|
|
|
me.updateSortSpan();
|
|
|
},
|
|
|
// 处理titleCol复选框点击事件的方法
|
|
|
titleColHanler:function () {
|
|
|
var example = $G("J_example"),
|
|
|
color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
|
|
|
colArr = example.rows,
|
|
|
colCount = colArr.length;
|
|
|
|
|
|
// 如果titleCol复选框被选中
|
|
|
if (titleCol.checked) {
|
|
|
// 循环遍历每一行，在每行的第一个位置插入表头单元格元素
|
|
|
for (var i = 0, node; i < colCount; i++) {
|
|
|
node = document.createElement("th");
|
|
|
node.innerHTML = lang.titleName;
|
|
|
colArr[i].insertBefore(node, colArr[i].children[0]);
|
|
|
}
|
|
|
} else {
|
|
|
// 如果titleCol复选框取消选中，循环移除每行的第一个元素（也就是移除之前添加的表头单元格）
|
|
|
for (var i = 0; i < colCount; i++) {
|
|
|
domUtils.remove(colArr[i].children[0]);
|
|
|
}
|
|
|
}
|
|
|
// 调用对象自身的setColor方法设置表格颜色，传入获取到的颜色值
|
|
|
me.setColor(color);
|
|
|
// 调用对象自身的updateSortSpan方法更新排序相关的显示内容
|
|
|
me.updateSortSpan();
|
|
|
},
|
|
|
// 处理caption复选框点击事件的方法
|
|
|
captionHanler:function () {
|
|
|
var example = $G("J_example");
|
|
|
// 如果caption复选框被选中
|
|
|
if (caption.checked) {
|
|
|
// 创建一个caption元素（标题说明元素），设置其innerHTML为相应的文本内容
|
|
|
var row = document.createElement('caption');
|
|
|
row.innerHTML = lang.captionName;
|
|
|
// 将创建的caption元素插入到表格的第一个子元素位置（也就是作为标题说明）
|
|
|
example.insertBefore(row, example.firstChild);
|
|
|
} else {
|
|
|
// 如果caption复选框取消选中，移除表格中的标题说明元素（通过获取第一个caption元素来移除）
|
|
|
domUtils.remove(domUtils.getElementsByTagName(example, 'caption')[0]);
|
|
|
}
|
|
|
},
|
|
|
// 处理sorttable复选框点击事件的方法，主要是更新排序相关的显示内容
|
|
|
sorttableHanler:function(){
|
|
|
me.updateSortSpan();
|
|
|
},
|
|
|
// 处理autoSizeContent单选框点击事件的方法，移除表格的宽度属性，使表格根据内容自适应宽度
|
|
|
autoSizeContentHanler:function () {
|
|
|
var example = $G("J_example");
|
|
|
example.removeAttribute("width");
|
|
|
},
|
|
|
// 处理autoSizePage单选框点击事件的方法，设置表格宽度为100%，并移除表格内每个td单元格的宽度属性，使表格根据页面宽度自适应
|
|
|
autoSizePageHanler:function () {
|
|
|
var example = $G("J_example");
|
|
|
var tds = example.getElementsByTagName(example, "td");
|
|
|
utils.each(tds, function (td) {
|
|
|
td.removeAttribute("width");
|
|
|
});
|
|
|
example.setAttribute('width', '100%');
|
|
|
},
|
|
|
// 更新排序相关显示内容的方法，比如添加或移除排序箭头等
|
|
|
updateSortSpan: function(){
|
|
|
var example = $G("J_example"),
|
|
|
row = example.rows[0];
|
|
|
|
|
|
var spans = domUtils.getElementsByTagName(example,"span");
|
|
|
utils.each(spans,function(span){
|
|
|
span.parentNode.removeChild(span);
|
|
|
});
|
|
|
if (sorttable.checked) {
|
|
|
utils.each(row.cells, function(cell, i){
|
|
|
var span = document.createElement("span");
|
|
|
span.innerHTML = "^";
|
|
|
cell.appendChild(span);
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 获取表格颜色的方法，通过获取当前选择位置所在单元格的边框颜色来确定，如果没有获取到则返回默认颜色#DDDDDD
|
|
|
getColor:function () {
|
|
|
var start = editor.selection.getStart(), color,
|
|
|
cell = domUtils.findParentByTagName(start, ["td", "th", "caption"], true);
|
|
|
color = cell && domUtils.getComputedStyle(cell, "border-color");
|
|
|
if (!color) color = "#DDDDDD";
|
|
|
return color;
|
|
|
},
|
|
|
// 设置表格颜色的方法，设置表格中所有td、th、caption元素的边框颜色，并更新tone元素（可能是显示颜色的输入框之类的）的值
|
|
|
setColor:function (color) {
|
|
|
var example = $G("J_example"),
|
|
|
arr = domUtils.getElementsByTagName(example, "td").concat(
|
|
|
domUtils.getElementsByTagName(example, "th"),
|
|
|
domUtils.getElementsByTagName(example, "caption")
|
|
|
);
|
|
|
|
|
|
tone.value = color;
|
|
|
utils.each(arr, function (node) {
|
|
|
node.style.borderColor = color;
|
|
|
});
|
|
|
|
|
|
},
|
|
|
// 设置表格自动尺寸的方法，默认选中autoSizePage单选框，并调用其对应的处理方法来设置表格尺寸
|
|
|
setAutoSize:function () {
|
|
|
var me = this;
|
|
|
autoSizePage.checked = true;
|
|
|
me.autoSizePageHanler();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 创建一个editTable的实例，启动整个表格编辑相关的功能逻辑
|
|
|
new editTable;
|
|
|
|
|
|
// 给dialog对象（可能是对话框相关对象）的onok属性设置一个函数，当点击对话框的确定按钮时执行以下逻辑
|
|
|
dialog.onok = function () {
|
|
|
editor.__hasEnterExecCommand = true;
|
|
|
|
|
|
var checks = {
|
|
|
title:"inserttitle deletetitle",
|
|
|
titleCol:"inserttitlecol deletetitlecol",
|
|
|
caption:"insertcaption deletecaption",
|
|
|
sorttable:"enablesort disablesort"
|
|
|
};
|
|
|
// 触发编辑器的'saveScene'事件
|
|
|
editor.fireEvent('saveScene');
|
|
|
for(var i in checks){
|
|
|
var cmds = checks[i].split(" "),
|
|
|
input = $G("J_" + i);
|
|
|
if(input["checked"]){
|
|
|
editor.queryCommandState(cmds[0])!=-1 &&editor.execCommand(cmds[0]);
|
|
|
}else{
|
|
|
editor.queryCommandState(cmds[1])!=-1 &&editor.execCommand(cmds[1]);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
editor.execCommand("edittable", tone.value);
|
|
|
autoSizeContent.checked?editor.execCommand('adaptbytext') : "";
|
|
|
autoSizePage.checked? editor.execCommand("adaptbywindow") : "";
|
|
|
editor.fireEvent('saveScene');
|
|
|
|
|
|
editor.__hasEnterExecCommand = false;
|
|
|
};
|
|
|
})(); |
