📄 table-operations.js
字号:
style.verticalAlign = val;
break;
case "f_st_float":
style.cssFloat = val;
break;
// case "f_st_margin":
// style.margin = val + "px";
// break;
// case "f_st_padding":
// style.padding = val + "px";
// break;
}
}
};
// Returns an HTML element for a widget that allows color selection. That is,
// a button that contains the given color, if any, and when pressed will popup
// the sooner-or-later-to-be-rewritten select_color.html dialog allowing user
// to select some color. If a color is selected, an input field with the name
// "f_st_"+name will be updated with the color value in #123456 format.
TableOperations.createColorButton = function(doc, editor, color, name) {
if (!color) {
color = "";
} else if (!/#/.test(color)) {
color = HTMLArea._colorToRgb(color);
}
var df = doc.createElement("span");
var field = doc.createElement("input");
field.type = "hidden";
df.appendChild(field);
field.name = "f_st_" + name;
field.value = color;
var button = doc.createElement("span");
button.className = "buttonColor";
df.appendChild(button);
var span = doc.createElement("span");
span.className = "chooser";
// span.innerHTML = " ";
span.style.backgroundColor = color;
button.appendChild(span);
button.onmouseover = function() { if (!this.disabled) { this.className += " buttonColor-hilite"; }};
button.onmouseout = function() { if (!this.disabled) { this.className = "buttonColor"; }};
span.onclick = function() {
if (this.parentNode.disabled) {
return false;
}
editor._popupDialog("select_color.html", function(color) {
if (color) {
span.style.backgroundColor = "#" + color;
field.value = "#" + color;
}
}, color);
};
var span2 = doc.createElement("span");
span2.innerHTML = "×";
span2.className = "nocolor";
span2.title = TableOperations.I18N["Unset color"];
button.appendChild(span2);
span2.onmouseover = function() { if (!this.parentNode.disabled) { this.className += " nocolor-hilite"; }};
span2.onmouseout = function() { if (!this.parentNode.disabled) { this.className = "nocolor"; }};
span2.onclick = function() {
span.style.backgroundColor = "";
field.value = "";
};
return df;
};
TableOperations.createStyleLayoutFieldset = function(doc, editor, el) {
var i18n = TableOperations.I18N;
var fieldset = doc.createElement("fieldset");
var legend = doc.createElement("legend");
fieldset.appendChild(legend);
legend.innerHTML = i18n["Layout"];
var table = doc.createElement("table");
fieldset.appendChild(table);
table.style.width = "100%";
var tbody = doc.createElement("tbody");
table.appendChild(tbody);
var tagname = el.tagName.toLowerCase();
var tr, td, input, select, option, options, i;
if (tagname != "td" && tagname != "tr" && tagname != "th") {
tr = doc.createElement("tr");
tbody.appendChild(tr);
td = doc.createElement("td");
td.className = "label";
tr.appendChild(td);
td.innerHTML = i18n["Float"] + ":";
td = doc.createElement("td");
tr.appendChild(td);
select = doc.createElement("select");
td.appendChild(select);
select.name = "f_st_float";
options = ["None", "Left", "Right"];
for (i in options) {
var Val = options[i];
var val = options[i].toLowerCase();
option = doc.createElement("option");
option.innerHTML = i18n[Val];
option.value = val;
option.selected = (("" + el.style.cssFloat).toLowerCase() == val);
select.appendChild(option);
}
}
tr = doc.createElement("tr");
tbody.appendChild(tr);
td = doc.createElement("td");
td.className = "label";
tr.appendChild(td);
td.innerHTML = i18n["Width"] + ":";
td = doc.createElement("td");
tr.appendChild(td);
input = doc.createElement("input");
input.type = "text";
input.value = TableOperations.getLength(el.style.width);
input.size = "5";
input.name = "f_st_width";
input.style.marginRight = "0.5em";
td.appendChild(input);
select = doc.createElement("select");
select.name = "f_st_widthUnit";
option = doc.createElement("option");
option.innerHTML = i18n["percent"];
option.value = "%";
option.selected = /%/.test(el.style.width);
select.appendChild(option);
option = doc.createElement("option");
option.innerHTML = i18n["pixels"];
option.value = "px";
option.selected = /px/.test(el.style.width);
select.appendChild(option);
td.appendChild(select);
select.style.marginRight = "0.5em";
td.appendChild(doc.createTextNode(i18n["Text align"] + ":"));
select = doc.createElement("select");
select.style.marginLeft = select.style.marginRight = "0.5em";
td.appendChild(select);
select.name = "f_st_textAlign";
options = ["Left", "Center", "Right", "Justify"];
if (tagname == "td") {
options.push("Char");
}
input = doc.createElement("input");
input.name = "f_st_textAlignChar";
input.size = "1";
input.style.fontFamily = "monospace";
td.appendChild(input);
for (i in options) {
var Val = options[i];
var val = Val.toLowerCase();
option = doc.createElement("option");
option.value = val;
option.innerHTML = i18n[Val];
option.selected = (el.style.textAlign.toLowerCase() == val);
select.appendChild(option);
}
function setCharVisibility(value) {
input.style.visibility = value ? "visible" : "hidden";
if (value) {
input.focus();
input.select();
}
};
select.onchange = function() { setCharVisibility(this.value == "char"); };
setCharVisibility(select.value == "char");
tr = doc.createElement("tr");
tbody.appendChild(tr);
td = doc.createElement("td");
td.className = "label";
tr.appendChild(td);
td.innerHTML = i18n["Height"] + ":";
td = doc.createElement("td");
tr.appendChild(td);
input = doc.createElement("input");
input.type = "text";
input.value = TableOperations.getLength(el.style.height);
input.size = "5";
input.name = "f_st_height";
input.style.marginRight = "0.5em";
td.appendChild(input);
select = doc.createElement("select");
select.name = "f_st_heightUnit";
option = doc.createElement("option");
option.innerHTML = i18n["percent"];
option.value = "%";
option.selected = /%/.test(el.style.height);
select.appendChild(option);
option = doc.createElement("option");
option.innerHTML = i18n["pixels"];
option.value = "px";
option.selected = /px/.test(el.style.height);
select.appendChild(option);
td.appendChild(select);
select.style.marginRight = "0.5em";
td.appendChild(doc.createTextNode(i18n["Vertical align"] + ":"));
select = doc.createElement("select");
select.name = "f_st_verticalAlign";
select.style.marginLeft = "0.5em";
td.appendChild(select);
options = ["Top", "Middle", "Bottom", "Baseline"];
for (i in options) {
var Val = options[i];
var val = Val.toLowerCase();
option = doc.createElement("option");
option.value = val;
option.innerHTML = i18n[Val];
option.selected = (el.style.verticalAlign.toLowerCase() == val);
select.appendChild(option);
}
return fieldset;
};
// Returns an HTML element containing the style attributes for the given
// element. This can be easily embedded into any dialog; the functionality is
// also provided.
TableOperations.createStyleFieldset = function(doc, editor, el) {
var i18n = TableOperations.I18N;
var fieldset = doc.createElement("fieldset");
var legend = doc.createElement("legend");
fieldset.appendChild(legend);
legend.innerHTML = i18n["CSS Style"];
var table = doc.createElement("table");
fieldset.appendChild(table);
table.style.width = "100%";
var tbody = doc.createElement("tbody");
table.appendChild(tbody);
var tr, td, input, select, option, options, i;
tr = doc.createElement("tr");
tbody.appendChild(tr);
td = doc.createElement("td");
tr.appendChild(td);
td.className = "label";
td.innerHTML = i18n["Background"] + ":";
td = doc.createElement("td");
tr.appendChild(td);
var df = TableOperations.createColorButton(doc, editor, el.style.backgroundColor, "backgroundColor");
df.firstChild.nextSibling.style.marginRight = "0.5em";
td.appendChild(df);
td.appendChild(doc.createTextNode(i18n["Image URL"] + ": "));
input = doc.createElement("input");
input.type = "text";
input.name = "f_st_backgroundImage";
if (el.style.backgroundImage.match(/url\(\s*(.*?)\s*\)/)) {
input.value = RegExp.$1;
}
// input.style.width = "100%";
td.appendChild(input);
tr = doc.createElement("tr");
tbody.appendChild(tr);
td = doc.createElement("td");
tr.appendChild(td);
td.className = "label";
td.innerHTML = i18n["FG Color"] + ":";
td = doc.createElement("td");
tr.appendChild(td);
td.appendChild(TableOperations.createColorButton(doc, editor, el.style.color, "color"));
// for better alignment we include an invisible field.
input = doc.createElement("input");
input.style.visibility = "hidden";
input.type = "text";
td.appendChild(input);
tr = doc.createElement("tr");
tbody.appendChild(tr);
td = doc.createElement("td");
tr.appendChild(td);
td.className = "label";
td.innerHTML = i18n["Border"] + ":";
td = doc.createElement("td");
tr.appendChild(td);
var colorButton = TableOperations.createColorButton(doc, editor, el.style.borderColor, "borderColor");
var btn = colorButton.firstChild.nextSibling;
td.appendChild(colorButton);
// borderFields.push(btn);
btn.style.marginRight = "0.5em";
select = doc.createElement("select");
var borderFields = [];
td.appendChild(select);
select.name = "f_st_borderStyle";
options = ["none", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
var currentBorderStyle = el.style.borderStyle;
// Gecko reports "solid solid solid solid" for "border-style: solid".
// That is, "top right bottom left" -- we only consider the first
// value.
(currentBorderStyle.match(/([^\s]*)\s/)) && (currentBorderStyle = RegExp.$1);
for (i in options) {
var val = options[i];
option = doc.createElement("option");
option.value = val;
option.innerHTML = val;
(val == currentBorderStyle) && (option.selected = true);
select.appendChild(option);
}
select.style.marginRight = "0.5em";
function setBorderFieldsStatus(value) {
for (i in borderFields) {
var el = borderFields[i];
el.style.visibility = value ? "hidden" : "visible";
if (!value && (el.tagName.toLowerCase() == "input")) {
el.focus();
el.select();
}
}
};
select.onchange = function() { setBorderFieldsStatus(this.value == "none"); };
input = doc.createElement("input");
borderFields.push(input);
input.type = "text";
input.name = "f_st_borderWidth";
input.value = TableOperations.getLength(el.style.borderWidth);
input.size = "5";
td.appendChild(input);
input.style.marginRight = "0.5em";
var span = doc.createElement("span");
span.innerHTML = i18n["pixels"];
td.appendChild(span);
borderFields.push(span);
setBorderFieldsStatus(select.value == "none");
if (el.tagName.toLowerCase() == "table") {
// the border-collapse style is only for tables
tr = doc.createElement("tr");
tbody.appendChild(tr);
td = doc.createElement("td");
td.className = "label";
tr.appendChild(td);
input = doc.createElement("input");
input.type = "checkbox";
input.name = "f_st_borderCollapse";
input.id = "f_st_borderCollapse";
var val = (/collapse/i.test(el.style.borderCollapse));
input.checked = val ? 1 : 0;
td.appendChild(input);
td = doc.createElement("td");
tr.appendChild(td);
var label = doc.createElement("label");
label.htmlFor = "f_st_borderCollapse";
label.innerHTML = i18n["Collapsed borders"];
td.appendChild(label);
}
// tr = doc.createElement("tr");
// tbody.appendChild(tr);
// td = doc.createElement("td");
// td.className = "label";
// tr.appendChild(td);
// td.innerHTML = i18n["Margin"] + ":";
// td = doc.createElement("td");
// tr.appendChild(td);
// input = doc.createElement("input");
// input.type = "text";
// input.size = "5";
// input.name = "f_st_margin";
// td.appendChild(input);
// input.style.marginRight = "0.5em";
// td.appendChild(doc.createTextNode(i18n["Padding"] + ":"));
// input = doc.createElement("input");
// input.type = "text";
// input.size = "5";
// input.name = "f_st_padding";
// td.appendChild(input);
// input.style.marginLeft = "0.5em";
// input.style.marginRight = "0.5em";
// td.appendChild(doc.createTextNode(i18n["pixels"]));
return fieldset;
};
//// END GENERIC CODE -------------------------------------------------------
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -