262 lines
9.8 KiB
JavaScript
262 lines
9.8 KiB
JavaScript
|
/**
|
||
|
|
* Created with JetBrains PhpStorm.
|
||
|
|
* User: xuheng
|
||
|
|
* Date: 12-12-19
|
||
|
|
* Time: 下午4:55
|
||
|
|
* To change this template use File | Settings | File Templates.
|
||
|
|
*/
|
||
|
|
(function () {
|
||
|
|
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"),
|
||
|
|
setSizePage = $G("J_setSizePage"),//设置自定义宽度
|
||
|
|
setSizeText = $G("J_setText"),//设置自定义宽度
|
||
|
|
tone = $G("J_tone"),
|
||
|
|
me,
|
||
|
|
preview = $G("J_preview");
|
||
|
|
|
||
|
|
var editTable = function () {
|
||
|
|
me = this;
|
||
|
|
me.init();
|
||
|
|
};
|
||
|
|
editTable.prototype = {
|
||
|
|
init: function () {
|
||
|
|
var colorPiker = new UE.ui.ColorPicker({
|
||
|
|
editor: editor
|
||
|
|
}),
|
||
|
|
colorPop = new UE.ui.Popup({
|
||
|
|
editor: editor,
|
||
|
|
content: colorPiker
|
||
|
|
});
|
||
|
|
|
||
|
|
title.checked = editor.queryCommandState("inserttitle") == -1;
|
||
|
|
titleCol.checked = editor.queryCommandState("inserttitlecol") == -1;
|
||
|
|
caption.checked = editor.queryCommandState("insertcaption") == -1;
|
||
|
|
sorttable.checked = editor.queryCommandState("enablesort") == 1;
|
||
|
|
|
||
|
|
var enablesortState = editor.queryCommandState("enablesort"),
|
||
|
|
disablesortState = editor.queryCommandState("disablesort");
|
||
|
|
|
||
|
|
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());
|
||
|
|
|
||
|
|
domUtils.on(title, "click", me.titleHanler);
|
||
|
|
domUtils.on(titleCol, "click", me.titleColHanler);
|
||
|
|
domUtils.on(caption, "click", me.captionHanler);
|
||
|
|
domUtils.on(sorttable, "click", me.sorttableHanler);
|
||
|
|
domUtils.on(autoSizeContent, "click", me.autoSizeContentHanler);
|
||
|
|
domUtils.on(autoSizePage, "click", me.autoSizePageHanler);
|
||
|
|
domUtils.on(setSizePage, "click", me.setSizePageHanler);//设置自定义宽度
|
||
|
|
|
||
|
|
domUtils.on(tone, "click", function () {
|
||
|
|
colorPop.showAnchor(tone);
|
||
|
|
});
|
||
|
|
domUtils.on(document, 'mousedown', function () {
|
||
|
|
colorPop.hide();
|
||
|
|
});
|
||
|
|
colorPiker.addListener("pickcolor", function () {
|
||
|
|
me.setColor(arguments[1]);
|
||
|
|
colorPop.hide();
|
||
|
|
});
|
||
|
|
colorPiker.addListener("picknocolor", function () {
|
||
|
|
me.setColor("");
|
||
|
|
colorPop.hide();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
createTable: function (hasTitle, hasTitleCol, hasCaption) {
|
||
|
|
var arr = [],
|
||
|
|
sortSpan = '<span>^</span>';
|
||
|
|
arr.push("<table id='J_example'>");
|
||
|
|
if (hasCaption) {
|
||
|
|
arr.push("<caption>" + lang.captionName + "</caption>")
|
||
|
|
}
|
||
|
|
if (hasTitle) {
|
||
|
|
arr.push("<tr>");
|
||
|
|
if (hasTitleCol) {
|
||
|
|
arr.push("<th>" + lang.titleName + "</th>");
|
||
|
|
}
|
||
|
|
for (var j = 0; j < 5; j++) {
|
||
|
|
arr.push("<th>" + lang.titleName + "</th>");
|
||
|
|
}
|
||
|
|
arr.push("</tr>");
|
||
|
|
}
|
||
|
|
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>");
|
||
|
|
preview.innerHTML = arr.join("");
|
||
|
|
this.updateSortSpan();
|
||
|
|
},
|
||
|
|
titleHanler: function () {
|
||
|
|
var example = $G("J_example"),
|
||
|
|
frg = document.createDocumentFragment(),
|
||
|
|
color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
|
||
|
|
colCount = example.rows[0].children.length;
|
||
|
|
|
||
|
|
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 {
|
||
|
|
domUtils.remove(example.rows[0]);
|
||
|
|
}
|
||
|
|
me.setColor(color);
|
||
|
|
me.updateSortSpan();
|
||
|
|
},
|
||
|
|
titleColHanler: function () {
|
||
|
|
var example = $G("J_example"),
|
||
|
|
color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
|
||
|
|
colArr = example.rows,
|
||
|
|
colCount = colArr.length;
|
||
|
|
|
||
|
|
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 {
|
||
|
|
for (var i = 0; i < colCount; i++) {
|
||
|
|
domUtils.remove(colArr[i].children[0]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
me.setColor(color);
|
||
|
|
me.updateSortSpan();
|
||
|
|
},
|
||
|
|
captionHanler: function () {
|
||
|
|
var example = $G("J_example");
|
||
|
|
if (caption.checked) {
|
||
|
|
var row = document.createElement('caption');
|
||
|
|
row.innerHTML = lang.captionName;
|
||
|
|
example.insertBefore(row, example.firstChild);
|
||
|
|
} else {
|
||
|
|
domUtils.remove(domUtils.getElementsByTagName(example, 'caption')[0]);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
sorttableHanler: function () {
|
||
|
|
me.updateSortSpan();
|
||
|
|
},
|
||
|
|
autoSizeContentHanler: function () {
|
||
|
|
var example = $G("J_example");
|
||
|
|
example.removeAttribute("width");
|
||
|
|
var txtSize = $G("J_setText");
|
||
|
|
txtSize.style.display = "none";
|
||
|
|
},
|
||
|
|
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%');
|
||
|
|
var txtSize = $G("J_setText");
|
||
|
|
txtSize.style.display = "none";
|
||
|
|
},
|
||
|
|
setSizePageHanler: function () { //设置自定义宽度
|
||
|
|
var example = $G("J_example");
|
||
|
|
var txtSize = $G("J_setText");
|
||
|
|
txtSize.style.display = "block";
|
||
|
|
var tds = example.getElementsByTagName(example, "td");
|
||
|
|
utils.each(tds, function (td) {
|
||
|
|
td.removeAttribute("width");
|
||
|
|
});
|
||
|
|
example.setAttribute('width', txtSize.value);
|
||
|
|
},
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
setAutoSize: function () {
|
||
|
|
var me = this;
|
||
|
|
autoSizePage.checked = true;
|
||
|
|
me.autoSizePageHanler();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
new editTable;
|
||
|
|
|
||
|
|
dialog.onok = function () {
|
||
|
|
editor.__hasEnterExecCommand = true;
|
||
|
|
|
||
|
|
var checks = {
|
||
|
|
title: "inserttitle deletetitle",
|
||
|
|
titleCol: "inserttitlecol deletetitlecol",
|
||
|
|
caption: "insertcaption deletecaption",
|
||
|
|
sorttable: "enablesort disablesort"
|
||
|
|
};
|
||
|
|
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]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//设置自定义宽度
|
||
|
|
if (setSizePage.checked) {
|
||
|
|
editor.execCommand("settablesize", setSizeText.value);
|
||
|
|
}
|
||
|
|
editor.execCommand("edittable", tone.value);
|
||
|
|
autoSizeContent.checked ? editor.execCommand('adaptbytext') : "";
|
||
|
|
autoSizePage.checked ? editor.execCommand("adaptbywindow") : "";
|
||
|
|
editor.fireEvent('saveScene');
|
||
|
|
|
||
|
|
editor.__hasEnterExecCommand = false;
|
||
|
|
};
|
||
|
|
})();
|