📄 table-operations.js
字号:
// Table Operations Plugin for HTMLArea-3.0
// Implementation by Mihai Bazon. Sponsored by http://www.bloki.com
//
// htmlArea v3.0 - Copyright (c) 2002 interactivetools.com, inc.
// This notice MUST stay intact for use (see license.txt).
//
// A free WYSIWYG editor replacement for <textarea> fields.
// For full source code and docs, visit http://www.interactivetools.com/
//
// Version 3.0 developed by Mihai Bazon for InteractiveTools.
// http://dynarch.com/mishoo
//
// $Id: table-operations.js,v 1.1 2005/05/31 17:46:07 hoping Exp $
// Object that will encapsulate all the table operations provided by
// HTMLArea-3.0 (except "insert table" which is included in the main file)
function TableOperations(editor) {
this.editor = editor;
var cfg = editor.config;
var tt = TableOperations.I18N;
var bl = TableOperations.btnList;
var self = this;
// register the toolbar buttons provided by this plugin
var toolbar = ["linebreak"];
for (var i in bl) {
var btn = bl[i];
if (!btn) {
toolbar.push("separator");
} else {
var id = "TO-" + btn[0];
cfg.registerButton(id, tt[id], editor.imgURL(btn[0] + ".gif", "TableOperations"), false,
function(editor, id) {
// dispatch button press event
self.buttonPress(editor, id);
}, btn[1]);
toolbar.push(id);
}
}
// add a new line in the toolbar
cfg.toolbar.push(toolbar);
};
TableOperations._pluginInfo = {
name : "TableOperations",
version : "1.0",
developer : "Mihai Bazon",
developer_url : "http://dynarch.com/mishoo/",
c_owner : "Mihai Bazon",
sponsor : "Zapatec Inc.",
sponsor_url : "http://www.bloki.com",
license : "htmlArea"
};
/************************
* UTILITIES
************************/
// retrieves the closest element having the specified tagName in the list of
// ancestors of the current selection/caret.
TableOperations.prototype.getClosest = function(tagName) {
var editor = this.editor;
var ancestors = editor.getAllAncestors();
var ret = null;
tagName = ("" + tagName).toLowerCase();
for (var i in ancestors) {
var el = ancestors[i];
if (el.tagName.toLowerCase() == tagName) {
ret = el;
break;
}
}
return ret;
};
// this function requires the file PopupDiv/PopupWin to be loaded from browser
TableOperations.prototype.dialogTableProperties = function() {
var i18n = TableOperations.I18N;
// retrieve existing values
var table = this.getClosest("table");
// this.editor.selectNodeContents(table);
// this.editor.updateToolbar();
var dialog = new PopupWin(this.editor, i18n["Table Properties"], function(dialog, params) {
TableOperations.processStyle(params, table);
for (var i in params) {
var val = params[i];
switch (i) {
case "f_caption":
if (/\S/.test(val)) {
// contains non white-space characters
var caption = table.getElementsByTagName("caption")[0];
if (!caption) {
caption = dialog.editor._doc.createElement("caption");
table.insertBefore(caption, table.firstChild);
}
caption.innerHTML = val;
} else {
// search for caption and delete it if found
var caption = table.getElementsByTagName("caption")[0];
if (caption) {
caption.parentNode.removeChild(caption);
}
}
break;
case "f_summary":
table.summary = val;
break;
case "f_width":
table.style.width = ("" + val) + params.f_unit;
break;
case "f_align":
table.align = val;
break;
case "f_spacing":
table.cellSpacing = val;
break;
case "f_padding":
table.cellPadding = val;
break;
case "f_borders":
table.border = val;
break;
case "f_frames":
table.frame = val;
break;
case "f_rules":
table.rules = val;
break;
}
}
// various workarounds to refresh the table display (Gecko,
// what's going on?! do not disappoint me!)
dialog.editor.forceRedraw();
dialog.editor.focusEditor();
dialog.editor.updateToolbar();
var save_collapse = table.style.borderCollapse;
table.style.borderCollapse = "collapse";
table.style.borderCollapse = "separate";
table.style.borderCollapse = save_collapse;
},
// this function gets called when the dialog needs to be initialized
function (dialog) {
var f_caption = "";
var capel = table.getElementsByTagName("caption")[0];
if (capel) {
f_caption = capel.innerHTML;
}
var f_summary = table.summary;
var f_width = parseInt(table.style.width);
isNaN(f_width) && (f_width = "");
var f_unit = /%/.test(table.style.width) ? 'percent' : 'pixels';
var f_align = table.align;
var f_spacing = table.cellSpacing;
var f_padding = table.cellPadding;
var f_borders = table.border;
var f_frames = table.frame;
var f_rules = table.rules;
function selected(val) {
return val ? " selected" : "";
};
// dialog contents
dialog.content.style.width = "400px";
dialog.content.innerHTML = " \
<div class='title'\
style='background: url(" + dialog.baseURL + dialog.editor.imgURL("table-prop.gif", "TableOperations") + ") #fff 98% 50% no-repeat'>" + i18n["Table Properties"] + "\
</div> \
<table style='width:100%'> \
<tr> \
<td> \
<fieldset><legend>" + i18n["Description"] + "</legend> \
<table style='width:100%'> \
<tr> \
<td class='label'>" + i18n["Caption"] + ":</td> \
<td class='value'><input type='text' name='f_caption' value='" + f_caption + "'/></td> \
</tr><tr> \
<td class='label'>" + i18n["Summary"] + ":</td> \
<td class='value'><input type='text' name='f_summary' value='" + f_summary + "'/></td> \
</tr> \
</table> \
</fieldset> \
</td> \
</tr> \
<tr><td id='--HA-layout'></td></tr> \
<tr> \
<td> \
<fieldset><legend>" + i18n["Spacing and padding"] + "</legend> \
<table style='width:100%'> \
"+// <tr> \
// <td class='label'>" + i18n["Width"] + ":</td> \
// <td><input type='text' name='f_width' value='" + f_width + "' size='5' /> \
// <select name='f_unit'> \
// <option value='%'" + selected(f_unit == "percent") + ">" + i18n["percent"] + "</option> \
// <option value='px'" + selected(f_unit == "pixels") + ">" + i18n["pixels"] + "</option> \
// </select> " + i18n["Align"] + ": \
// <select name='f_align'> \
// <option value='left'" + selected(f_align == "left") + ">" + i18n["Left"] + "</option> \
// <option value='center'" + selected(f_align == "center") + ">" + i18n["Center"] + "</option> \
// <option value='right'" + selected(f_align == "right") + ">" + i18n["Right"] + "</option> \
// </select> \
// </td> \
// </tr> \
" <tr> \
<td class='label'>" + i18n["Spacing"] + ":</td> \
<td><input type='text' name='f_spacing' size='5' value='" + f_spacing + "' /> " + i18n["Padding"] + ":\
<input type='text' name='f_padding' size='5' value='" + f_padding + "' /> " + i18n["pixels"] + "\
</td> \
</tr> \
</table> \
</fieldset> \
</td> \
</tr> \
<tr> \
<td> \
<fieldset><legend>Frame and borders</legend> \
<table width='100%'> \
<tr> \
<td class='label'>" + i18n["Borders"] + ":</td> \
<td><input name='f_borders' type='text' size='5' value='" + f_borders + "' /> " + i18n["pixels"] + "</td> \
</tr> \
<tr> \
<td class='label'>" + i18n["Frames"] + ":</td> \
<td> \
<select name='f_frames'> \
<option value='void'" + selected(f_frames == "void") + ">" + i18n["No sides"] + "</option> \
<option value='above'" + selected(f_frames == "above") + ">" + i18n["The top side only"] + "</option> \
<option value='below'" + selected(f_frames == "below") + ">" + i18n["The bottom side only"] + "</option> \
<option value='hsides'" + selected(f_frames == "hsides") + ">" + i18n["The top and bottom sides only"] + "</option> \
<option value='vsides'" + selected(f_frames == "vsides") + ">" + i18n["The right and left sides only"] + "</option> \
<option value='lhs'" + selected(f_frames == "lhs") + ">" + i18n["The left-hand side only"] + "</option> \
<option value='rhs'" + selected(f_frames == "rhs") + ">" + i18n["The right-hand side only"] + "</option> \
<option value='box'" + selected(f_frames == "box") + ">" + i18n["All four sides"] + "</option> \
</select> \
</td> \
</tr> \
<tr> \
<td class='label'>" + i18n["Rules"] + ":</td> \
<td> \
<select name='f_rules'> \
<option value='none'" + selected(f_rules == "none") + ">" + i18n["No rules"] + "</option> \
<option value='rows'" + selected(f_rules == "rows") + ">" + i18n["Rules will appear between rows only"] + "</option> \
<option value='cols'" + selected(f_rules == "cols") + ">" + i18n["Rules will appear between columns only"] + "</option> \
<option value='all'" + selected(f_rules == "all") + ">" + i18n["Rules will appear between all rows and columns"] + "</option> \
</select> \
</td> \
</tr> \
</table> \
</fieldset> \
</td> \
</tr> \
<tr> \
<td id='--HA-style'></td> \
</tr> \
</table> \
";
var st_prop = TableOperations.createStyleFieldset(dialog.doc, dialog.editor, table);
var p = dialog.doc.getElementById("--HA-style");
p.appendChild(st_prop);
var st_layout = TableOperations.createStyleLayoutFieldset(dialog.doc, dialog.editor, table);
p = dialog.doc.getElementById("--HA-layout");
p.appendChild(st_layout);
dialog.modal = true;
dialog.addButtons("ok", "cancel");
dialog.showAtElement(dialog.editor._iframe, "c");
});
};
// this function requires the file PopupDiv/PopupWin to be loaded from browser
TableOperations.prototype.dialogRowCellProperties = function(cell) {
var i18n = TableOperations.I18N;
// retrieve existing values
var element = this.getClosest(cell ? "td" : "tr");
var table = this.getClosest("table");
// this.editor.selectNodeContents(element);
// this.editor.updateToolbar();
var dialog = new PopupWin(this.editor, i18n[cell ? "Cell Properties" : "Row Properties"], function(dialog, params) {
TableOperations.processStyle(params, element);
for (var i in params) {
var val = params[i];
switch (i) {
case "f_align":
element.align = val;
break;
case "f_char":
element.ch = val;
break;
case "f_valign":
element.vAlign = val;
break;
}
}
// various workarounds to refresh the table display (Gecko,
// what's going on?! do not disappoint me!)
dialog.editor.forceRedraw();
dialog.editor.focusEditor();
dialog.editor.updateToolbar();
var save_collapse = table.style.borderCollapse;
table.style.borderCollapse = "collapse";
table.style.borderCollapse = "separate";
table.style.borderCollapse = save_collapse;
},
// this function gets called when the dialog needs to be initialized
function (dialog) {
var f_align = element.align;
var f_valign = element.vAlign;
var f_char = element.ch;
function selected(val) {
return val ? " selected" : "";
};
// dialog contents
dialog.content.style.width = "400px";
dialog.content.innerHTML = " \
<div class='title'\
style='background: url(" + dialog.baseURL + dialog.editor.imgURL(cell ? "cell-prop.gif" : "row-prop.gif", "TableOperations") + ") #fff 98% 50% no-repeat'>" + i18n[cell ? "Cell Properties" : "Row Properties"] + "</div> \
<table style='width:100%'> \
<tr> \
<td id='--HA-layout'> \
"+// <fieldset><legend>" + i18n["Layout"] + "</legend> \
// <table style='width:100%'> \
// <tr> \
// <td class='label'>" + i18n["Align"] + ":</td> \
// <td> \
// <select name='f_align'> \
// <option value='left'" + selected(f_align == "left") + ">" + i18n["Left"] + "</option> \
// <option value='center'" + selected(f_align == "center") + ">" + i18n["Center"] + "</option> \
// <option value='right'" + selected(f_align == "right") + ">" + i18n["Right"] + "</option> \
// <option value='char'" + selected(f_align == "char") + ">" + i18n["Char"] + "</option> \
// </select> \
// " + i18n["Char"] + ": \
// <input type='text' style='font-family: monospace; text-align: center' name='f_char' size='1' value='" + f_char + "' /> \
// </td> \
// </tr><tr> \
// <td class='label'>" + i18n["Vertical align"] + ":</td> \
// <td> \
// <select name='f_valign'> \
// <option value='top'" + selected(f_valign == "top") + ">" + i18n["Top"] + "</option> \
// <option value='middle'" + selected(f_valign == "middle") + ">" + i18n["Middle"] + "</option> \
// <option value='bottom'" + selected(f_valign == "bottom") + ">" + i18n["Bottom"] + "</option> \
// <option value='baseline'" + selected(f_valign == "baseline") + ">" + i18n["Baseline"] + "</option> \
// </select> \
// </td> \
// </tr> \
// </table> \
// </fieldset> \
" </td> \
</tr> \
<tr> \
<td id='--HA-style'></td> \
</tr> \
</table> \
";
var st_prop = TableOperations.createStyleFieldset(dialog.doc, dialog.editor, element);
var p = dialog.doc.getElementById("--HA-style");
p.appendChild(st_prop);
var st_layout = TableOperations.createStyleLayoutFieldset(dialog.doc, dialog.editor, element);
p = dialog.doc.getElementById("--HA-layout");
p.appendChild(st_layout);
dialog.modal = true;
dialog.addButtons("ok", "cancel");
dialog.showAtElement(dialog.editor._iframe, "c");
});
};
// this function gets called when some button from the TableOperations toolbar
// was pressed.
TableOperations.prototype.buttonPress = function(editor, button_id) {
this.editor = editor;
var mozbr = HTMLArea.is_gecko ? "<br />" : "";
var i18n = TableOperations.I18N;
// helper function that clears the content in a table row
function clearRow(tr) {
var tds = tr.getElementsByTagName("td");
for (var i = tds.length; --i >= 0;) {
var td = tds[i];
td.rowSpan = 1;
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -