Initial checkin

This commit is contained in:
Mike Macgirvin 2010-07-01 16:48:07 -07:00
commit 6348e70daa
393 changed files with 59765 additions and 0 deletions

View file

@ -0,0 +1,178 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{#table_dlg.cell_title}</title>
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="../../utils/mctabs.js"></script>
<script type="text/javascript" src="../../utils/form_utils.js"></script>
<script type="text/javascript" src="../../utils/editable_selects.js"></script>
<script type="text/javascript" src="js/cell.js"></script>
<link href="css/cell.css" rel="stylesheet" type="text/css" />
</head>
<body id="tablecell" style="display: none">
<form onsubmit="updateAction();return false;" action="#">
<div class="tabs">
<ul>
<li id="general_tab" class="current"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{#table_dlg.general_tab}</a></span></li>
<li id="advanced_tab"><span><a href="javascript:mcTabs.displayTab('advanced_tab','advanced_panel');" onmousedown="return false;">{#table_dlg.advanced_tab}</a></span></li>
</ul>
</div>
<div class="panel_wrapper">
<div id="general_panel" class="panel current">
<fieldset>
<legend>{#table_dlg.general_props}</legend>
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td><label for="align">{#table_dlg.align}</label></td>
<td>
<select id="align" name="align" class="mceFocus">
<option value="">{#not_set}</option>
<option value="center">{#table_dlg.align_middle}</option>
<option value="left">{#table_dlg.align_left}</option>
<option value="right">{#table_dlg.align_right}</option>
</select>
</td>
<td><label for="celltype">{#table_dlg.cell_type}</label></td>
<td>
<select id="celltype" name="celltype">
<option value="td">{#table_dlg.td}</option>
<option value="th">{#table_dlg.th}</option>
</select>
</td>
</tr>
<tr>
<td><label for="valign">{#table_dlg.valign}</label></td>
<td>
<select id="valign" name="valign">
<option value="">{#not_set}</option>
<option value="top">{#table_dlg.align_top}</option>
<option value="middle">{#table_dlg.align_middle}</option>
<option value="bottom">{#table_dlg.align_bottom}</option>
</select>
</td>
<td><label for="scope">{#table_dlg.scope}</label></td>
<td>
<select id="scope" name="scope">
<option value="">{#not_set}</option>
<option value="col">{#table.col}</option>
<option value="row">{#table.row}</option>
<option value="rowgroup">{#table_dlg.rowgroup}</option>
<option value="colgroup">{#table_dlg.colgroup}</option>
</select>
</td>
</tr>
<tr>
<td><label for="width">{#table_dlg.width}</label></td>
<td><input id="width" name="width" type="text" value="" size="4" maxlength="4" onchange="changedSize();" /></td>
<td><label for="height">{#table_dlg.height}</label></td>
<td><input id="height" name="height" type="text" value="" size="4" maxlength="4" onchange="changedSize();" /></td>
</tr>
<tr id="styleSelectRow">
<td><label for="class">{#class_name}</label></td>
<td colspan="3">
<select id="class" name="class" class="mceEditableSelect">
<option value="" selected="selected">{#not_set}</option>
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div id="advanced_panel" class="panel">
<fieldset>
<legend>{#table_dlg.advanced_props}</legend>
<table border="0" cellpadding="0" cellspacing="4">
<tr>
<td class="column1"><label for="id">{#table_dlg.id}</label></td>
<td><input id="id" name="id" type="text" value="" style="width: 200px" /></td>
</tr>
<tr>
<td><label for="style">{#table_dlg.style}</label></td>
<td><input type="text" id="style" name="style" value="" style="width: 200px;" onchange="changedStyle();" /></td>
</tr>
<tr>
<td class="column1"><label for="dir">{#table_dlg.langdir}</label></td>
<td>
<select id="dir" name="dir" style="width: 200px">
<option value="">{#not_set}</option>
<option value="ltr">{#table_dlg.ltr}</option>
<option value="rtl">{#table_dlg.rtl}</option>
</select>
</td>
</tr>
<tr>
<td class="column1"><label for="lang">{#table_dlg.langcode}</label></td>
<td>
<input id="lang" name="lang" type="text" value="" style="width: 200px" />
</td>
</tr>
<tr>
<td class="column1"><label for="backgroundimage">{#table_dlg.bgimage}</label></td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input id="backgroundimage" name="backgroundimage" type="text" value="" style="width: 200px" onchange="changedBackgroundImage();" /></td>
<td id="backgroundimagebrowsercontainer">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="column1"><label for="bordercolor">{#table_dlg.bordercolor}</label></td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input id="bordercolor" name="bordercolor" type="text" value="" size="9" onchange="updateColor('bordercolor_pick','bordercolor');changedColor();" /></td>
<td id="bordercolor_pickcontainer">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="column1"><label for="bgcolor">{#table_dlg.bgcolor}</label></td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input id="bgcolor" name="bgcolor" type="text" value="" size="9" onchange="updateColor('bgcolor_pick','bgcolor');changedColor();" /></td>
<td id="bgcolor_pickcontainer">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
<div class="mceActionPanel">
<div>
<select id="action" name="action">
<option value="cell">{#table_dlg.cell_cell}</option>
<option value="row">{#table_dlg.cell_row}</option>
<option value="all">{#table_dlg.cell_all}</option>
</select>
</div>
<input type="submit" id="insert" name="insert" value="{#update}" />
<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
</div>
</form>
</body>
</html>

View file

@ -0,0 +1,17 @@
/* CSS file for cell dialog in the table plugin */
.panel_wrapper div.current {
height: 200px;
}
.advfield {
width: 200px;
}
#action {
margin-bottom: 3px;
}
#class {
width: 150px;
}

View file

@ -0,0 +1,25 @@
/* CSS file for row dialog in the table plugin */
.panel_wrapper div.current {
height: 200px;
}
.advfield {
width: 200px;
}
#action {
margin-bottom: 3px;
}
#rowtype,#align,#valign,#class,#height {
width: 150px;
}
#height {
width: 50px;
}
.col2 {
padding-left: 20px;
}

View file

@ -0,0 +1,13 @@
/* CSS file for table dialog in the table plugin */
.panel_wrapper div.current {
height: 245px;
}
.advfield {
width: 200px;
}
#class {
width: 150px;
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,1125 @@
/**
* editor_plugin_src.js
*
* Copyright 2009, Moxiecode Systems AB
* Released under LGPL License.
*
* License: http://tinymce.moxiecode.com/license
* Contributing: http://tinymce.moxiecode.com/contributing
*/
(function(tinymce) {
var each = tinymce.each;
/**
* Table Grid class.
*/
function TableGrid(table, dom, selection) {
var grid, startPos, endPos, selectedCell;
buildGrid();
selectedCell = dom.getParent(selection.getStart(), 'th,td');
if (selectedCell) {
startPos = getPos(selectedCell);
endPos = findEndPos();
selectedCell = getCell(startPos.x, startPos.y);
}
function cloneNode(node, children) {
node = node.cloneNode(children);
node.removeAttribute('id');
return node;
}
function buildGrid() {
var startY = 0;
grid = [];
each(['thead', 'tbody', 'tfoot'], function(part) {
var rows = dom.select(part + ' tr', table);
each(rows, function(tr, y) {
y += startY;
each(dom.select('td,th', tr), function(td, x) {
var x2, y2, rowspan, colspan;
// Skip over existing cells produced by rowspan
if (grid[y]) {
while (grid[y][x])
x++;
}
// Get col/rowspan from cell
rowspan = getSpanVal(td, 'rowspan');
colspan = getSpanVal(td, 'colspan');
// Fill out rowspan/colspan right and down
for (y2 = y; y2 < y + rowspan; y2++) {
if (!grid[y2])
grid[y2] = [];
for (x2 = x; x2 < x + colspan; x2++) {
grid[y2][x2] = {
part : part,
real : y2 == y && x2 == x,
elm : td,
rowspan : rowspan,
colspan : colspan
};
}
}
});
});
startY += rows.length;
});
};
function getCell(x, y) {
var row;
row = grid[y];
if (row)
return row[x];
};
function getSpanVal(td, name) {
return parseInt(td.getAttribute(name) || 1);
};
function isCellSelected(cell) {
return dom.hasClass(cell.elm, 'mceSelected') || cell == selectedCell;
};
function getSelectedRows() {
var rows = [];
each(table.rows, function(row) {
each(row.cells, function(cell) {
if (dom.hasClass(cell, 'mceSelected') || cell == selectedCell.elm) {
rows.push(row);
return false;
}
});
});
return rows;
};
function deleteTable() {
var rng = dom.createRng();
rng.setStartAfter(table);
rng.setEndAfter(table);
selection.setRng(rng);
dom.remove(table);
};
function cloneCell(cell) {
var formatNode;
// Clone formats
tinymce.walk(cell, function(node) {
var curNode;
if (node.nodeType == 3) {
each(dom.getParents(node.parentNode, null, cell).reverse(), function(node) {
node = cloneNode(node, false);
if (!formatNode)
formatNode = curNode = node;
else if (curNode)
curNode.appendChild(node);
curNode = node;
});
// Add something to the inner node
if (curNode)
curNode.innerHTML = tinymce.isIE ? '&nbsp;' : '<br _mce_bogus="1" />';
return false;
}
}, 'childNodes');
cell = cloneNode(cell, false);
cell.rowSpan = cell.colSpan = 1;
if (formatNode) {
cell.appendChild(formatNode);
} else {
if (!tinymce.isIE)
cell.innerHTML = '<br _mce_bogus="1" />';
}
return cell;
};
function cleanup() {
var rng = dom.createRng();
// Empty rows
each(dom.select('tr', table), function(tr) {
if (tr.cells.length == 0)
dom.remove(tr);
});
// Empty table
if (dom.select('tr', table).length == 0) {
rng.setStartAfter(table);
rng.setEndAfter(table);
selection.setRng(rng);
dom.remove(table);
return;
}
// Empty header/body/footer
each(dom.select('thead,tbody,tfoot', table), function(part) {
if (part.rows.length == 0)
dom.remove(part);
});
// Restore selection to start position if it still exists
buildGrid();
// Restore the selection to the closest table position
row = grid[Math.min(grid.length - 1, startPos.y)];
if (row) {
selection.select(row[Math.min(row.length - 1, startPos.x)].elm, true);
selection.collapse(true);
}
};
function fillLeftDown(x, y, rows, cols) {
var tr, x2, r, c, cell;
tr = grid[y][x].elm.parentNode;
for (r = 1; r <= rows; r++) {
tr = dom.getNext(tr, 'tr');
if (tr) {
// Loop left to find real cell
for (x2 = x; x2 >= 0; x2--) {
cell = grid[y + r][x2].elm;
if (cell.parentNode == tr) {
// Append clones after
for (c = 1; c <= cols; c++)
dom.insertAfter(cloneCell(cell), cell);
break;
}
}
if (x2 == -1) {
// Insert nodes before first cell
for (c = 1; c <= cols; c++)
tr.insertBefore(cloneCell(tr.cells[0]), tr.cells[0]);
}
}
}
};
function split() {
each(grid, function(row, y) {
each(row, function(cell, x) {
var colSpan, rowSpan, newCell, i;
if (isCellSelected(cell)) {
cell = cell.elm;
colSpan = getSpanVal(cell, 'colspan');
rowSpan = getSpanVal(cell, 'rowspan');
if (colSpan > 1 || rowSpan > 1) {
cell.colSpan = cell.rowSpan = 1;
// Insert cells right
for (i = 0; i < colSpan - 1; i++)
dom.insertAfter(cloneCell(cell), cell);
fillLeftDown(x, y, rowSpan - 1, colSpan);
}
}
});
});
};
function merge(cell, cols, rows) {
var startX, startY, endX, endY, x, y, startCell, endCell, cell, children;
// Use specified cell and cols/rows
if (cell) {
pos = getPos(cell);
startX = pos.x;
startY = pos.y;
endX = startX + (cols - 1);
endY = startY + (rows - 1);
} else {
// Use selection
startX = startPos.x;
startY = startPos.y;
endX = endPos.x;
endY = endPos.y;
}
// Find start/end cells
startCell = getCell(startX, startY);
endCell = getCell(endX, endY);
// Check if the cells exists and if they are of the same part for example tbody = tbody
if (startCell && endCell && startCell.part == endCell.part) {
// Split and rebuild grid
split();
buildGrid();
// Set row/col span to start cell
startCell = getCell(startX, startY).elm;
startCell.colSpan = (endX - startX) + 1;
startCell.rowSpan = (endY - startY) + 1;
// Remove other cells and add it's contents to the start cell
for (y = startY; y <= endY; y++) {
for (x = startX; x <= endX; x++) {
cell = grid[y][x].elm;
if (cell != startCell) {
// Move children to startCell
children = tinymce.grep(cell.childNodes);
each(children, function(node, i) {
// Jump over last BR element
if (node.nodeName != 'BR' || i != children.length - 1)
startCell.appendChild(node);
});
// Remove cell
dom.remove(cell);
}
}
}
// Remove empty rows etc and restore caret location
cleanup();
}
};
function insertRow(before) {
var posY, cell, lastCell, x, rowElm, newRow, newCell, otherCell;
// Find first/last row
each(grid, function(row, y) {
each(row, function(cell, x) {
if (isCellSelected(cell)) {
cell = cell.elm;
rowElm = cell.parentNode;
newRow = cloneNode(rowElm, false);
posY = y;
if (before)
return false;
}
});
if (before)
return !posY;
});
for (x = 0; x < grid[0].length; x++) {
cell = grid[posY][x].elm;
if (cell != lastCell) {
if (!before) {
rowSpan = getSpanVal(cell, 'rowspan');
if (rowSpan > 1) {
cell.rowSpan = rowSpan + 1;
continue;
}
} else {
// Check if cell above can be expanded
if (posY > 0 && grid[posY - 1][x]) {
otherCell = grid[posY - 1][x].elm;
rowSpan = getSpanVal(otherCell, 'rowspan');
if (rowSpan > 1) {
otherCell.rowSpan = rowSpan + 1;
continue;
}
}
}
// Insert new cell into new row
newCell = cloneCell(cell)
newCell.colSpan = cell.colSpan;
newRow.appendChild(newCell);
lastCell = cell;
}
}
if (newRow.hasChildNodes()) {
if (!before)
dom.insertAfter(newRow, rowElm);
else
rowElm.parentNode.insertBefore(newRow, rowElm);
}
};
function insertCol(before) {
var posX, lastCell;
// Find first/last column
each(grid, function(row, y) {
each(row, function(cell, x) {
if (isCellSelected(cell)) {
posX = x;
if (before)
return false;
}
});
if (before)
return !posX;
});
each(grid, function(row, y) {
var cell = row[posX].elm, rowSpan, colSpan;
if (cell != lastCell) {
colSpan = getSpanVal(cell, 'colspan');
rowSpan = getSpanVal(cell, 'rowspan');
if (colSpan == 1) {
if (!before) {
dom.insertAfter(cloneCell(cell), cell);
fillLeftDown(posX, y, rowSpan - 1, colSpan);
} else {
cell.parentNode.insertBefore(cloneCell(cell), cell);
fillLeftDown(posX, y, rowSpan - 1, colSpan);
}
} else
cell.colSpan++;
lastCell = cell;
}
});
};
function deleteCols() {
var cols = [];
// Get selected column indexes
each(grid, function(row, y) {
each(row, function(cell, x) {
if (isCellSelected(cell) && tinymce.inArray(cols, x) === -1) {
each(grid, function(row) {
var cell = row[x].elm, colSpan;
colSpan = getSpanVal(cell, 'colspan');
if (colSpan > 1)
cell.colSpan = colSpan - 1;
else
dom.remove(cell);
});
cols.push(x);
}
});
});
cleanup();
};
function deleteRows() {
var rows;
function deleteRow(tr) {
var nextTr, pos, lastCell;
nextTr = dom.getNext(tr, 'tr');
// Move down row spanned cells
each(tr.cells, function(cell) {
var rowSpan = getSpanVal(cell, 'rowspan');
if (rowSpan > 1) {
cell.rowSpan = rowSpan - 1;
pos = getPos(cell);
fillLeftDown(pos.x, pos.y, 1, 1);
}
});
// Delete cells
pos = getPos(tr.cells[0]);
each(grid[pos.y], function(cell) {
var rowSpan;
cell = cell.elm;
if (cell != lastCell) {
rowSpan = getSpanVal(cell, 'rowspan');
if (rowSpan <= 1)
dom.remove(cell);
else
cell.rowSpan = rowSpan - 1;
lastCell = cell;
}
});
};
// Get selected rows and move selection out of scope
rows = getSelectedRows();
// Delete all selected rows
each(rows.reverse(), function(tr) {
deleteRow(tr);
});
cleanup();
};
function cutRows() {
var rows = getSelectedRows();
dom.remove(rows);
cleanup();
return rows;
};
function copyRows() {
var rows = getSelectedRows();
each(rows, function(row, i) {
rows[i] = cloneNode(row, true);
});
return rows;
};
function pasteRows(rows, before) {
var selectedRows = getSelectedRows(),
targetRow = selectedRows[before ? 0 : selectedRows.length - 1],
targetCellCount = targetRow.cells.length;
// Calc target cell count
each(grid, function(row) {
var match;
targetCellCount = 0;
each(row, function(cell, x) {
if (cell.real)
targetCellCount += cell.colspan;
if (cell.elm.parentNode == targetRow)
match = 1;
});
if (match)
return false;
});
if (!before)
rows.reverse();
each(rows, function(row) {
var cellCount = row.cells.length, cell;
// Remove col/rowspans
for (i = 0; i < cellCount; i++) {
cell = row.cells[i];
cell.colSpan = cell.rowSpan = 1;
}
// Needs more cells
for (i = cellCount; i < targetCellCount; i++)
row.appendChild(cloneCell(row.cells[cellCount - 1]));
// Needs less cells
for (i = targetCellCount; i < cellCount; i++)
dom.remove(row.cells[i]);
// Add before/after
if (before)
targetRow.parentNode.insertBefore(row, targetRow);
else
dom.insertAfter(row, targetRow);
});
};
function getPos(target) {
var pos;
each(grid, function(row, y) {
each(row, function(cell, x) {
if (cell.elm == target) {
pos = {x : x, y : y};
return false;
}
});
return !pos;
});
return pos;
};
function setStartCell(cell) {
startPos = getPos(cell);
};
function findEndPos() {
var pos, maxX, maxY;
maxX = maxY = 0;
each(grid, function(row, y) {
each(row, function(cell, x) {
var colSpan, rowSpan;
if (isCellSelected(cell)) {
cell = grid[y][x];
if (x > maxX)
maxX = x;
if (y > maxY)
maxY = y;
if (cell.real) {
colSpan = cell.colspan - 1;
rowSpan = cell.rowspan - 1;
if (colSpan) {
if (x + colSpan > maxX)
maxX = x + colSpan;
}
if (rowSpan) {
if (y + rowSpan > maxY)
maxY = y + rowSpan;
}
}
}
});
});
return {x : maxX, y : maxY};
};
function setEndCell(cell) {
var startX, startY, endX, endY, maxX, maxY, colSpan, rowSpan;
endPos = getPos(cell);
if (startPos && endPos) {
// Get start/end positions
startX = Math.min(startPos.x, endPos.x);
startY = Math.min(startPos.y, endPos.y);
endX = Math.max(startPos.x, endPos.x);
endY = Math.max(startPos.y, endPos.y);
// Expand end positon to include spans
maxX = endX;
maxY = endY;
// Expand startX
for (y = startY; y <= maxY; y++) {
cell = grid[y][startX];
if (!cell.real) {
if (startX - (cell.colspan - 1) < startX)
startX -= cell.colspan - 1;
}
}
// Expand startY
for (x = startX; x <= maxX; x++) {
cell = grid[startY][x];
if (!cell.real) {
if (startY - (cell.rowspan - 1) < startY)
startY -= cell.rowspan - 1;
}
}
// Find max X, Y
for (y = startY; y <= endY; y++) {
for (x = startX; x <= endX; x++) {
cell = grid[y][x];
if (cell.real) {
colSpan = cell.colspan - 1;
rowSpan = cell.rowspan - 1;
if (colSpan) {
if (x + colSpan > maxX)
maxX = x + colSpan;
}
if (rowSpan) {
if (y + rowSpan > maxY)
maxY = y + rowSpan;
}
}
}
}
// Remove current selection
dom.removeClass(dom.select('td.mceSelected,th.mceSelected'), 'mceSelected');
// Add new selection
for (y = startY; y <= maxY; y++) {
for (x = startX; x <= maxX; x++)
dom.addClass(grid[y][x].elm, 'mceSelected');
}
}
};
// Expose to public
tinymce.extend(this, {
deleteTable : deleteTable,
split : split,
merge : merge,
insertRow : insertRow,
insertCol : insertCol,
deleteCols : deleteCols,
deleteRows : deleteRows,
cutRows : cutRows,
copyRows : copyRows,
pasteRows : pasteRows,
getPos : getPos,
setStartCell : setStartCell,
setEndCell : setEndCell
});
};
tinymce.create('tinymce.plugins.TablePlugin', {
init : function(ed, url) {
var winMan, clipboardRows;
function createTableGrid(node) {
var selection = ed.selection, tblElm = ed.dom.getParent(node || selection.getNode(), 'table');
if (tblElm)
return new TableGrid(tblElm, ed.dom, selection);
};
function cleanup() {
// Restore selection possibilities
ed.getBody().style.webkitUserSelect = '';
ed.dom.removeClass(ed.dom.select('td.mceSelected,th.mceSelected'), 'mceSelected');
};
// Register buttons
each([
['table', 'table.desc', 'mceInsertTable', true],
['delete_table', 'table.del', 'mceTableDelete'],
['delete_col', 'table.delete_col_desc', 'mceTableDeleteCol'],
['delete_row', 'table.delete_row_desc', 'mceTableDeleteRow'],
['col_after', 'table.col_after_desc', 'mceTableInsertColAfter'],
['col_before', 'table.col_before_desc', 'mceTableInsertColBefore'],
['row_after', 'table.row_after_desc', 'mceTableInsertRowAfter'],
['row_before', 'table.row_before_desc', 'mceTableInsertRowBefore'],
['row_props', 'table.row_desc', 'mceTableRowProps', true],
['cell_props', 'table.cell_desc', 'mceTableCellProps', true],
['split_cells', 'table.split_cells_desc', 'mceTableSplitCells', true],
['merge_cells', 'table.merge_cells_desc', 'mceTableMergeCells', true]
], function(c) {
ed.addButton(c[0], {title : c[1], cmd : c[2], ui : c[3]});
});
// Select whole table is a table border is clicked
if (!tinymce.isIE) {
ed.onClick.add(function(ed, e) {
e = e.target;
if (e.nodeName === 'TABLE')
ed.selection.select(e);
});
}
// Handle node change updates
ed.onNodeChange.add(function(ed, cm, n) {
var p;
n = ed.selection.getStart();
p = ed.dom.getParent(n, 'td,th,caption');
cm.setActive('table', n.nodeName === 'TABLE' || !!p);
// Disable table tools if we are in caption
if (p && p.nodeName === 'CAPTION')
p = 0;
cm.setDisabled('delete_table', !p);
cm.setDisabled('delete_col', !p);
cm.setDisabled('delete_table', !p);
cm.setDisabled('delete_row', !p);
cm.setDisabled('col_after', !p);
cm.setDisabled('col_before', !p);
cm.setDisabled('row_after', !p);
cm.setDisabled('row_before', !p);
cm.setDisabled('row_props', !p);
cm.setDisabled('cell_props', !p);
cm.setDisabled('split_cells', !p);
cm.setDisabled('merge_cells', !p);
});
ed.onInit.add(function(ed) {
var startTable, startCell, dom = ed.dom, tableGrid;
winMan = ed.windowManager;
// Add cell selection logic
ed.onMouseDown.add(function(ed, e) {
if (e.button != 2) {
cleanup();
startCell = dom.getParent(e.target, 'td,th');
startTable = dom.getParent(startCell, 'table');
}
});
dom.bind(ed.getDoc(), 'mouseover', function(e) {
var sel, table, target = e.target;
if (startCell && (tableGrid || target != startCell) && (target.nodeName == 'TD' || target.nodeName == 'TH')) {
table = dom.getParent(target, 'table');
if (table == startTable) {
if (!tableGrid) {
tableGrid = createTableGrid(table);
tableGrid.setStartCell(startCell);
ed.getBody().style.webkitUserSelect = 'none';
}
tableGrid.setEndCell(target);
}
// Remove current selection
sel = ed.selection.getSel();
if (sel.removeAllRanges)
sel.removeAllRanges();
else
sel.empty();
e.preventDefault();
}
});
ed.onMouseUp.add(function(ed, e) {
var rng, sel = ed.selection, selectedCells, nativeSel = sel.getSel(), walker, node, lastNode, endNode;
// Move selection to startCell
if (startCell) {
if (tableGrid)
ed.getBody().style.webkitUserSelect = '';
function setPoint(node, start) {
var walker = new tinymce.dom.TreeWalker(node, node);
do {
// Text node
if (node.nodeType == 3 && tinymce.trim(node.nodeValue).length != 0) {
if (start)
rng.setStart(node, 0);
else
rng.setEnd(node, node.nodeValue.length);
return;
}
// BR element
if (node.nodeName == 'BR') {
if (start)
rng.setStartBefore(node);
else
rng.setEndBefore(node);
return;
}
} while (node = (start ? walker.next() : walker.prev()));
};
// Try to expand text selection as much as we can only Gecko supports cell selection
selectedCells = dom.select('td.mceSelected,th.mceSelected');
if (selectedCells.length > 0) {
rng = dom.createRng();
node = selectedCells[0];
endNode = selectedCells[selectedCells.length - 1];
setPoint(node, 1);
walker = new tinymce.dom.TreeWalker(node, dom.getParent(selectedCells[0], 'table'));
do {
if (node.nodeName == 'TD' || node.nodeName == 'TH') {
if (!dom.hasClass(node, 'mceSelected'))
break;
lastNode = node;
}
} while (node = walker.next());
setPoint(lastNode);
sel.setRng(rng);
}
ed.nodeChanged();
startCell = tableGrid = startTable = null;
}
});
ed.onKeyUp.add(function(ed, e) {
cleanup();
});
// Add context menu
if (ed && ed.plugins.contextmenu) {
ed.plugins.contextmenu.onContextMenu.add(function(th, m, e) {
var sm, se = ed.selection, el = se.getNode() || ed.getBody();
if (ed.dom.getParent(e, 'td') || ed.dom.getParent(e, 'th') || ed.dom.select('td.mceSelected,th.mceSelected').length) {
m.removeAll();
if (el.nodeName == 'A' && !ed.dom.getAttrib(el, 'name')) {
m.add({title : 'advanced.link_desc', icon : 'link', cmd : ed.plugins.advlink ? 'mceAdvLink' : 'mceLink', ui : true});
m.add({title : 'advanced.unlink_desc', icon : 'unlink', cmd : 'UnLink'});
m.addSeparator();
}
if (el.nodeName == 'IMG' && el.className.indexOf('mceItem') == -1) {
m.add({title : 'advanced.image_desc', icon : 'image', cmd : ed.plugins.advimage ? 'mceAdvImage' : 'mceImage', ui : true});
m.addSeparator();
}
m.add({title : 'table.desc', icon : 'table', cmd : 'mceInsertTable', value : {action : 'insert'}});
m.add({title : 'table.props_desc', icon : 'table_props', cmd : 'mceInsertTable'});
m.add({title : 'table.del', icon : 'delete_table', cmd : 'mceTableDelete'});
m.addSeparator();
// Cell menu
sm = m.addMenu({title : 'table.cell'});
sm.add({title : 'table.cell_desc', icon : 'cell_props', cmd : 'mceTableCellProps'});
sm.add({title : 'table.split_cells_desc', icon : 'split_cells', cmd : 'mceTableSplitCells'});
sm.add({title : 'table.merge_cells_desc', icon : 'merge_cells', cmd : 'mceTableMergeCells'});
// Row menu
sm = m.addMenu({title : 'table.row'});
sm.add({title : 'table.row_desc', icon : 'row_props', cmd : 'mceTableRowProps'});
sm.add({title : 'table.row_before_desc', icon : 'row_before', cmd : 'mceTableInsertRowBefore'});
sm.add({title : 'table.row_after_desc', icon : 'row_after', cmd : 'mceTableInsertRowAfter'});
sm.add({title : 'table.delete_row_desc', icon : 'delete_row', cmd : 'mceTableDeleteRow'});
sm.addSeparator();
sm.add({title : 'table.cut_row_desc', icon : 'cut', cmd : 'mceTableCutRow'});
sm.add({title : 'table.copy_row_desc', icon : 'copy', cmd : 'mceTableCopyRow'});
sm.add({title : 'table.paste_row_before_desc', icon : 'paste', cmd : 'mceTablePasteRowBefore'}).setDisabled(!clipboardRows);
sm.add({title : 'table.paste_row_after_desc', icon : 'paste', cmd : 'mceTablePasteRowAfter'}).setDisabled(!clipboardRows);
// Column menu
sm = m.addMenu({title : 'table.col'});
sm.add({title : 'table.col_before_desc', icon : 'col_before', cmd : 'mceTableInsertColBefore'});
sm.add({title : 'table.col_after_desc', icon : 'col_after', cmd : 'mceTableInsertColAfter'});
sm.add({title : 'table.delete_col_desc', icon : 'delete_col', cmd : 'mceTableDeleteCol'});
} else
m.add({title : 'table.desc', icon : 'table', cmd : 'mceInsertTable'});
});
}
// Fixes an issue on Gecko where it's impossible to place the caret behind a table
// This fix will force a paragraph element after the table but only when the forced_root_block setting is enabled
if (!tinymce.isIE) {
function fixTableCaretPos() {
var last;
// Skip empty text nodes form the end
for (last = ed.getBody().lastChild; last && last.nodeType == 3 && !last.nodeValue.length; last = last.previousSibling) ;
if (last && last.nodeName == 'TABLE')
ed.dom.add(ed.getBody(), 'p', null, '<br mce_bogus="1" />');
};
// Fixes an bug where it's impossible to place the caret before a table in Gecko
// this fix solves it by detecting when the caret is at the beginning of such a table
// and then manually moves the caret infront of the table
if (tinymce.isGecko) {
ed.onKeyDown.add(function(ed, e) {
var rng, table, dom = ed.dom;
// On gecko it's not possible to place the caret before a table
if (e.keyCode == 37 || e.keyCode == 38) {
rng = ed.selection.getRng();
table = dom.getParent(rng.startContainer, 'table');
if (table && ed.getBody().firstChild == table) {
if (isAtStart(rng, table)) {
rng = dom.createRng();
rng.setStartBefore(table);
rng.setEndBefore(table);
ed.selection.setRng(rng);
e.preventDefault();
}
}
}
});
}
ed.onKeyUp.add(fixTableCaretPos);
ed.onSetContent.add(fixTableCaretPos);
ed.onVisualAid.add(fixTableCaretPos);
ed.onPreProcess.add(function(ed, o) {
var last = o.node.lastChild;
if (last && last.childNodes.length == 1 && last.firstChild.nodeName == 'BR')
ed.dom.remove(last);
});
fixTableCaretPos();
}
});
// Register action commands
each({
mceTableSplitCells : function(grid) {
grid.split();
},
mceTableMergeCells : function(grid) {
var rowSpan, colSpan, cell;
cell = ed.dom.getParent(ed.selection.getNode(), 'th,td');
if (cell) {
rowSpan = cell.rowSpan;
colSpan = cell.colSpan;
}
if (!ed.dom.select('td.mceSelected,th.mceSelected').length) {
winMan.open({
url : url + '/merge_cells.htm',
width : 240 + parseInt(ed.getLang('table.merge_cells_delta_width', 0)),
height : 110 + parseInt(ed.getLang('table.merge_cells_delta_height', 0)),
inline : 1
}, {
rows : rowSpan,
cols : colSpan,
onaction : function(data) {
grid.merge(cell, data.cols, data.rows);
},
plugin_url : url
});
} else
grid.merge();
},
mceTableInsertRowBefore : function(grid) {
grid.insertRow(true);
},
mceTableInsertRowAfter : function(grid) {
grid.insertRow();
},
mceTableInsertColBefore : function(grid) {
grid.insertCol(true);
},
mceTableInsertColAfter : function(grid) {
grid.insertCol();
},
mceTableDeleteCol : function(grid) {
grid.deleteCols();
},
mceTableDeleteRow : function(grid) {
grid.deleteRows();
},
mceTableCutRow : function(grid) {
clipboardRows = grid.cutRows();
},
mceTableCopyRow : function(grid) {
clipboardRows = grid.copyRows();
},
mceTablePasteRowBefore : function(grid) {
grid.pasteRows(clipboardRows, true);
},
mceTablePasteRowAfter : function(grid) {
grid.pasteRows(clipboardRows);
},
mceTableDelete : function(grid) {
grid.deleteTable();
}
}, function(func, name) {
ed.addCommand(name, function() {
var grid = createTableGrid();
if (grid) {
func(grid);
ed.execCommand('mceRepaint');
cleanup();
}
});
});
// Register dialog commands
each({
mceInsertTable : function(val) {
winMan.open({
url : url + '/table.htm',
width : 400 + parseInt(ed.getLang('table.table_delta_width', 0)),
height : 320 + parseInt(ed.getLang('table.table_delta_height', 0)),
inline : 1
}, {
plugin_url : url,
action : val ? val.action : 0
});
},
mceTableRowProps : function() {
winMan.open({
url : url + '/row.htm',
width : 400 + parseInt(ed.getLang('table.rowprops_delta_width', 0)),
height : 295 + parseInt(ed.getLang('table.rowprops_delta_height', 0)),
inline : 1
}, {
plugin_url : url
});
},
mceTableCellProps : function() {
winMan.open({
url : url + '/cell.htm',
width : 400 + parseInt(ed.getLang('table.cellprops_delta_width', 0)),
height : 295 + parseInt(ed.getLang('table.cellprops_delta_height', 0)),
inline : 1
}, {
plugin_url : url
});
}
}, function(func, name) {
ed.addCommand(name, function(ui, val) {
func(val);
});
});
}
});
// Register plugin
tinymce.PluginManager.add('table', tinymce.plugins.TablePlugin);
})(tinymce);

View file

@ -0,0 +1,286 @@
tinyMCEPopup.requireLangPack();
var ed;
function init() {
ed = tinyMCEPopup.editor;
tinyMCEPopup.resizeToInnerSize();
document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor');
document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor')
var inst = ed;
var tdElm = ed.dom.getParent(ed.selection.getStart(), "td,th");
var formObj = document.forms[0];
var st = ed.dom.parseStyle(ed.dom.getAttrib(tdElm, "style"));
// Get table cell data
var celltype = tdElm.nodeName.toLowerCase();
var align = ed.dom.getAttrib(tdElm, 'align');
var valign = ed.dom.getAttrib(tdElm, 'valign');
var width = trimSize(getStyle(tdElm, 'width', 'width'));
var height = trimSize(getStyle(tdElm, 'height', 'height'));
var bordercolor = convertRGBToHex(getStyle(tdElm, 'bordercolor', 'borderLeftColor'));
var bgcolor = convertRGBToHex(getStyle(tdElm, 'bgcolor', 'backgroundColor'));
var className = ed.dom.getAttrib(tdElm, 'class');
var backgroundimage = getStyle(tdElm, 'background', 'backgroundImage').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
var id = ed.dom.getAttrib(tdElm, 'id');
var lang = ed.dom.getAttrib(tdElm, 'lang');
var dir = ed.dom.getAttrib(tdElm, 'dir');
var scope = ed.dom.getAttrib(tdElm, 'scope');
// Setup form
addClassesToList('class', 'table_cell_styles');
TinyMCE_EditableSelects.init();
if (!ed.dom.hasClass(tdElm, 'mceSelected')) {
formObj.bordercolor.value = bordercolor;
formObj.bgcolor.value = bgcolor;
formObj.backgroundimage.value = backgroundimage;
formObj.width.value = width;
formObj.height.value = height;
formObj.id.value = id;
formObj.lang.value = lang;
formObj.style.value = ed.dom.serializeStyle(st);
selectByValue(formObj, 'align', align);
selectByValue(formObj, 'valign', valign);
selectByValue(formObj, 'class', className, true, true);
selectByValue(formObj, 'celltype', celltype);
selectByValue(formObj, 'dir', dir);
selectByValue(formObj, 'scope', scope);
// Resize some elements
if (isVisible('backgroundimagebrowser'))
document.getElementById('backgroundimage').style.width = '180px';
updateColor('bordercolor_pick', 'bordercolor');
updateColor('bgcolor_pick', 'bgcolor');
} else
tinyMCEPopup.dom.hide('action');
}
function updateAction() {
var el, inst = ed, tdElm, trElm, tableElm, formObj = document.forms[0];
tinyMCEPopup.restoreSelection();
el = ed.selection.getStart();
tdElm = ed.dom.getParent(el, "td,th");
trElm = ed.dom.getParent(el, "tr");
tableElm = ed.dom.getParent(el, "table");
// Cell is selected
if (ed.dom.hasClass(tdElm, 'mceSelected')) {
// Update all selected sells
tinymce.each(ed.dom.select('td.mceSelected,th.mceSelected'), function(td) {
updateCell(td);
});
ed.addVisual();
ed.nodeChanged();
inst.execCommand('mceEndUndoLevel');
tinyMCEPopup.close();
return;
}
ed.execCommand('mceBeginUndoLevel');
switch (getSelectValue(formObj, 'action')) {
case "cell":
var celltype = getSelectValue(formObj, 'celltype');
var scope = getSelectValue(formObj, 'scope');
function doUpdate(s) {
if (s) {
updateCell(tdElm);
ed.addVisual();
ed.nodeChanged();
inst.execCommand('mceEndUndoLevel');
tinyMCEPopup.close();
}
};
if (ed.getParam("accessibility_warnings", 1)) {
if (celltype == "th" && scope == "")
tinyMCEPopup.confirm(ed.getLang('table_dlg.missing_scope', '', true), doUpdate);
else
doUpdate(1);
return;
}
updateCell(tdElm);
break;
case "row":
var cell = trElm.firstChild;
if (cell.nodeName != "TD" && cell.nodeName != "TH")
cell = nextCell(cell);
do {
cell = updateCell(cell, true);
} while ((cell = nextCell(cell)) != null);
break;
case "all":
var rows = tableElm.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
var cell = rows[i].firstChild;
if (cell.nodeName != "TD" && cell.nodeName != "TH")
cell = nextCell(cell);
do {
cell = updateCell(cell, true);
} while ((cell = nextCell(cell)) != null);
}
break;
}
ed.addVisual();
ed.nodeChanged();
inst.execCommand('mceEndUndoLevel');
tinyMCEPopup.close();
}
function nextCell(elm) {
while ((elm = elm.nextSibling) != null) {
if (elm.nodeName == "TD" || elm.nodeName == "TH")
return elm;
}
return null;
}
function updateCell(td, skip_id) {
var inst = ed;
var formObj = document.forms[0];
var curCellType = td.nodeName.toLowerCase();
var celltype = getSelectValue(formObj, 'celltype');
var doc = inst.getDoc();
var dom = ed.dom;
if (!skip_id)
td.setAttribute('id', formObj.id.value);
td.setAttribute('align', formObj.align.value);
td.setAttribute('vAlign', formObj.valign.value);
td.setAttribute('lang', formObj.lang.value);
td.setAttribute('dir', getSelectValue(formObj, 'dir'));
td.setAttribute('style', ed.dom.serializeStyle(ed.dom.parseStyle(formObj.style.value)));
td.setAttribute('scope', formObj.scope.value);
ed.dom.setAttrib(td, 'class', getSelectValue(formObj, 'class'));
// Clear deprecated attributes
ed.dom.setAttrib(td, 'width', '');
ed.dom.setAttrib(td, 'height', '');
ed.dom.setAttrib(td, 'bgColor', '');
ed.dom.setAttrib(td, 'borderColor', '');
ed.dom.setAttrib(td, 'background', '');
// Set styles
td.style.width = getCSSSize(formObj.width.value);
td.style.height = getCSSSize(formObj.height.value);
if (formObj.bordercolor.value != "") {
td.style.borderColor = formObj.bordercolor.value;
td.style.borderStyle = td.style.borderStyle == "" ? "solid" : td.style.borderStyle;
td.style.borderWidth = td.style.borderWidth == "" ? "1px" : td.style.borderWidth;
} else
td.style.borderColor = '';
td.style.backgroundColor = formObj.bgcolor.value;
if (formObj.backgroundimage.value != "")
td.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')";
else
td.style.backgroundImage = '';
if (curCellType != celltype) {
// changing to a different node type
var newCell = doc.createElement(celltype);
for (var c=0; c<td.childNodes.length; c++)
newCell.appendChild(td.childNodes[c].cloneNode(1));
for (var a=0; a<td.attributes.length; a++)
ed.dom.setAttrib(newCell, td.attributes[a].name, ed.dom.getAttrib(td, td.attributes[a].name));
td.parentNode.replaceChild(newCell, td);
td = newCell;
}
dom.setAttrib(td, 'style', dom.serializeStyle(dom.parseStyle(td.style.cssText)));
return td;
}
function changedBackgroundImage() {
var formObj = document.forms[0];
var st = ed.dom.parseStyle(formObj.style.value);
st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
formObj.style.value = ed.dom.serializeStyle(st);
}
function changedSize() {
var formObj = document.forms[0];
var st = ed.dom.parseStyle(formObj.style.value);
var width = formObj.width.value;
if (width != "")
st['width'] = getCSSSize(width);
else
st['width'] = "";
var height = formObj.height.value;
if (height != "")
st['height'] = getCSSSize(height);
else
st['height'] = "";
formObj.style.value = ed.dom.serializeStyle(st);
}
function changedColor() {
var formObj = document.forms[0];
var st = ed.dom.parseStyle(formObj.style.value);
st['background-color'] = formObj.bgcolor.value;
st['border-color'] = formObj.bordercolor.value;
formObj.style.value = ed.dom.serializeStyle(st);
}
function changedStyle() {
var formObj = document.forms[0];
var st = ed.dom.parseStyle(formObj.style.value);
if (st['background-image'])
formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
else
formObj.backgroundimage.value = '';
if (st['width'])
formObj.width.value = trimSize(st['width']);
if (st['height'])
formObj.height.value = trimSize(st['height']);
if (st['background-color']) {
formObj.bgcolor.value = st['background-color'];
updateColor('bgcolor_pick','bgcolor');
}
if (st['border-color']) {
formObj.bordercolor.value = st['border-color'];
updateColor('bordercolor_pick','bordercolor');
}
}
tinyMCEPopup.onInit.add(init);

View file

@ -0,0 +1,27 @@
tinyMCEPopup.requireLangPack();
var MergeCellsDialog = {
init : function() {
var f = document.forms[0];
f.numcols.value = tinyMCEPopup.getWindowArg('cols', 1);
f.numrows.value = tinyMCEPopup.getWindowArg('rows', 1);
},
merge : function() {
var func, f = document.forms[0];
tinyMCEPopup.restoreSelection();
func = tinyMCEPopup.getWindowArg('onaction');
func({
cols : f.numcols.value,
rows : f.numrows.value
});
tinyMCEPopup.close();
}
};
tinyMCEPopup.onInit.add(MergeCellsDialog.init, MergeCellsDialog);

View file

@ -0,0 +1,237 @@
tinyMCEPopup.requireLangPack();
function init() {
tinyMCEPopup.resizeToInnerSize();
document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
var inst = tinyMCEPopup.editor;
var dom = inst.dom;
var trElm = dom.getParent(inst.selection.getStart(), "tr");
var formObj = document.forms[0];
var st = dom.parseStyle(dom.getAttrib(trElm, "style"));
// Get table row data
var rowtype = trElm.parentNode.nodeName.toLowerCase();
var align = dom.getAttrib(trElm, 'align');
var valign = dom.getAttrib(trElm, 'valign');
var height = trimSize(getStyle(trElm, 'height', 'height'));
var className = dom.getAttrib(trElm, 'class');
var bgcolor = convertRGBToHex(getStyle(trElm, 'bgcolor', 'backgroundColor'));
var backgroundimage = getStyle(trElm, 'background', 'backgroundImage').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
var id = dom.getAttrib(trElm, 'id');
var lang = dom.getAttrib(trElm, 'lang');
var dir = dom.getAttrib(trElm, 'dir');
selectByValue(formObj, 'rowtype', rowtype);
// Any cells selected
if (dom.select('td.mceSelected,th.mceSelected', trElm).length == 0) {
// Setup form
addClassesToList('class', 'table_row_styles');
TinyMCE_EditableSelects.init();
formObj.bgcolor.value = bgcolor;
formObj.backgroundimage.value = backgroundimage;
formObj.height.value = height;
formObj.id.value = id;
formObj.lang.value = lang;
formObj.style.value = dom.serializeStyle(st);
selectByValue(formObj, 'align', align);
selectByValue(formObj, 'valign', valign);
selectByValue(formObj, 'class', className, true, true);
selectByValue(formObj, 'dir', dir);
// Resize some elements
if (isVisible('backgroundimagebrowser'))
document.getElementById('backgroundimage').style.width = '180px';
updateColor('bgcolor_pick', 'bgcolor');
} else
tinyMCEPopup.dom.hide('action');
}
function updateAction() {
var inst = tinyMCEPopup.editor, dom = inst.dom, trElm, tableElm, formObj = document.forms[0];
var action = getSelectValue(formObj, 'action');
tinyMCEPopup.restoreSelection();
trElm = dom.getParent(inst.selection.getStart(), "tr");
tableElm = dom.getParent(inst.selection.getStart(), "table");
// Update all selected rows
if (dom.select('td.mceSelected,th.mceSelected', trElm).length > 0) {
tinymce.each(tableElm.rows, function(tr) {
var i;
for (i = 0; i < tr.cells.length; i++) {
if (dom.hasClass(tr.cells[i], 'mceSelected')) {
updateRow(tr, true);
return;
}
}
});
inst.addVisual();
inst.nodeChanged();
inst.execCommand('mceEndUndoLevel');
tinyMCEPopup.close();
return;
}
inst.execCommand('mceBeginUndoLevel');
switch (action) {
case "row":
updateRow(trElm);
break;
case "all":
var rows = tableElm.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++)
updateRow(rows[i], true);
break;
case "odd":
case "even":
var rows = tableElm.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
if ((i % 2 == 0 && action == "odd") || (i % 2 != 0 && action == "even"))
updateRow(rows[i], true, true);
}
break;
}
inst.addVisual();
inst.nodeChanged();
inst.execCommand('mceEndUndoLevel');
tinyMCEPopup.close();
}
function updateRow(tr_elm, skip_id, skip_parent) {
var inst = tinyMCEPopup.editor;
var formObj = document.forms[0];
var dom = inst.dom;
var curRowType = tr_elm.parentNode.nodeName.toLowerCase();
var rowtype = getSelectValue(formObj, 'rowtype');
var doc = inst.getDoc();
// Update row element
if (!skip_id)
tr_elm.setAttribute('id', formObj.id.value);
tr_elm.setAttribute('align', getSelectValue(formObj, 'align'));
tr_elm.setAttribute('vAlign', getSelectValue(formObj, 'valign'));
tr_elm.setAttribute('lang', formObj.lang.value);
tr_elm.setAttribute('dir', getSelectValue(formObj, 'dir'));
tr_elm.setAttribute('style', dom.serializeStyle(dom.parseStyle(formObj.style.value)));
dom.setAttrib(tr_elm, 'class', getSelectValue(formObj, 'class'));
// Clear deprecated attributes
tr_elm.setAttribute('background', '');
tr_elm.setAttribute('bgColor', '');
tr_elm.setAttribute('height', '');
// Set styles
tr_elm.style.height = getCSSSize(formObj.height.value);
tr_elm.style.backgroundColor = formObj.bgcolor.value;
if (formObj.backgroundimage.value != "")
tr_elm.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')";
else
tr_elm.style.backgroundImage = '';
// Setup new rowtype
if (curRowType != rowtype && !skip_parent) {
// first, clone the node we are working on
var newRow = tr_elm.cloneNode(1);
// next, find the parent of its new destination (creating it if necessary)
var theTable = dom.getParent(tr_elm, "table");
var dest = rowtype;
var newParent = null;
for (var i = 0; i < theTable.childNodes.length; i++) {
if (theTable.childNodes[i].nodeName.toLowerCase() == dest)
newParent = theTable.childNodes[i];
}
if (newParent == null) {
newParent = doc.createElement(dest);
if (dest == "thead") {
if (theTable.firstChild.nodeName == 'CAPTION')
inst.dom.insertAfter(newParent, theTable.firstChild);
else
theTable.insertBefore(newParent, theTable.firstChild);
} else
theTable.appendChild(newParent);
}
// append the row to the new parent
newParent.appendChild(newRow);
// remove the original
tr_elm.parentNode.removeChild(tr_elm);
// set tr_elm to the new node
tr_elm = newRow;
}
dom.setAttrib(tr_elm, 'style', dom.serializeStyle(dom.parseStyle(tr_elm.style.cssText)));
}
function changedBackgroundImage() {
var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom;
var st = dom.parseStyle(formObj.style.value);
st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
formObj.style.value = dom.serializeStyle(st);
}
function changedStyle() {
var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom;
var st = dom.parseStyle(formObj.style.value);
if (st['background-image'])
formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
else
formObj.backgroundimage.value = '';
if (st['height'])
formObj.height.value = trimSize(st['height']);
if (st['background-color']) {
formObj.bgcolor.value = st['background-color'];
updateColor('bgcolor_pick','bgcolor');
}
}
function changedSize() {
var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom;
var st = dom.parseStyle(formObj.style.value);
var height = formObj.height.value;
if (height != "")
st['height'] = getCSSSize(height);
else
st['height'] = "";
formObj.style.value = dom.serializeStyle(st);
}
function changedColor() {
var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom;
var st = dom.parseStyle(formObj.style.value);
st['background-color'] = formObj.bgcolor.value;
formObj.style.value = dom.serializeStyle(st);
}
tinyMCEPopup.onInit.add(init);

View file

@ -0,0 +1,449 @@
tinyMCEPopup.requireLangPack();
var action, orgTableWidth, orgTableHeight, dom = tinyMCEPopup.editor.dom;
function insertTable() {
var formObj = document.forms[0];
var inst = tinyMCEPopup.editor, dom = inst.dom;
var cols = 2, rows = 2, border = 0, cellpadding = -1, cellspacing = -1, align, width, height, className, caption, frame, rules;
var html = '', capEl, elm;
var cellLimit, rowLimit, colLimit;
tinyMCEPopup.restoreSelection();
if (!AutoValidator.validate(formObj)) {
tinyMCEPopup.alert(inst.getLang('invalid_data'));
return false;
}
elm = dom.getParent(inst.selection.getNode(), 'table');
// Get form data
cols = formObj.elements['cols'].value;
rows = formObj.elements['rows'].value;
border = formObj.elements['border'].value != "" ? formObj.elements['border'].value : 0;
cellpadding = formObj.elements['cellpadding'].value != "" ? formObj.elements['cellpadding'].value : "";
cellspacing = formObj.elements['cellspacing'].value != "" ? formObj.elements['cellspacing'].value : "";
align = getSelectValue(formObj, "align");
frame = getSelectValue(formObj, "tframe");
rules = getSelectValue(formObj, "rules");
width = formObj.elements['width'].value;
height = formObj.elements['height'].value;
bordercolor = formObj.elements['bordercolor'].value;
bgcolor = formObj.elements['bgcolor'].value;
className = getSelectValue(formObj, "class");
id = formObj.elements['id'].value;
summary = formObj.elements['summary'].value;
style = formObj.elements['style'].value;
dir = formObj.elements['dir'].value;
lang = formObj.elements['lang'].value;
background = formObj.elements['backgroundimage'].value;
caption = formObj.elements['caption'].checked;
cellLimit = tinyMCEPopup.getParam('table_cell_limit', false);
rowLimit = tinyMCEPopup.getParam('table_row_limit', false);
colLimit = tinyMCEPopup.getParam('table_col_limit', false);
// Validate table size
if (colLimit && cols > colLimit) {
tinyMCEPopup.alert(inst.getLang('table_dlg.col_limit').replace(/\{\$cols\}/g, colLimit));
return false;
} else if (rowLimit && rows > rowLimit) {
tinyMCEPopup.alert(inst.getLang('table_dlg.row_limit').replace(/\{\$rows\}/g, rowLimit));
return false;
} else if (cellLimit && cols * rows > cellLimit) {
tinyMCEPopup.alert(inst.getLang('table_dlg.cell_limit').replace(/\{\$cells\}/g, cellLimit));
return false;
}
// Update table
if (action == "update") {
inst.execCommand('mceBeginUndoLevel');
dom.setAttrib(elm, 'cellPadding', cellpadding, true);
dom.setAttrib(elm, 'cellSpacing', cellspacing, true);
dom.setAttrib(elm, 'border', border);
dom.setAttrib(elm, 'align', align);
dom.setAttrib(elm, 'frame', frame);
dom.setAttrib(elm, 'rules', rules);
dom.setAttrib(elm, 'class', className);
dom.setAttrib(elm, 'style', style);
dom.setAttrib(elm, 'id', id);
dom.setAttrib(elm, 'summary', summary);
dom.setAttrib(elm, 'dir', dir);
dom.setAttrib(elm, 'lang', lang);
capEl = inst.dom.select('caption', elm)[0];
if (capEl && !caption)
capEl.parentNode.removeChild(capEl);
if (!capEl && caption) {
capEl = elm.ownerDocument.createElement('caption');
if (!tinymce.isIE)
capEl.innerHTML = '<br _mce_bogus="1"/>';
elm.insertBefore(capEl, elm.firstChild);
}
if (width && inst.settings.inline_styles) {
dom.setStyle(elm, 'width', width);
dom.setAttrib(elm, 'width', '');
} else {
dom.setAttrib(elm, 'width', width, true);
dom.setStyle(elm, 'width', '');
}
// Remove these since they are not valid XHTML
dom.setAttrib(elm, 'borderColor', '');
dom.setAttrib(elm, 'bgColor', '');
dom.setAttrib(elm, 'background', '');
if (height && inst.settings.inline_styles) {
dom.setStyle(elm, 'height', height);
dom.setAttrib(elm, 'height', '');
} else {
dom.setAttrib(elm, 'height', height, true);
dom.setStyle(elm, 'height', '');
}
if (background != '')
elm.style.backgroundImage = "url('" + background + "')";
else
elm.style.backgroundImage = '';
/* if (tinyMCEPopup.getParam("inline_styles")) {
if (width != '')
elm.style.width = getCSSSize(width);
}*/
if (bordercolor != "") {
elm.style.borderColor = bordercolor;
elm.style.borderStyle = elm.style.borderStyle == "" ? "solid" : elm.style.borderStyle;
elm.style.borderWidth = border == "" ? "1px" : border;
} else
elm.style.borderColor = '';
elm.style.backgroundColor = bgcolor;
elm.style.height = getCSSSize(height);
inst.addVisual();
// Fix for stange MSIE align bug
//elm.outerHTML = elm.outerHTML;
inst.nodeChanged();
inst.execCommand('mceEndUndoLevel');
// Repaint if dimensions changed
if (formObj.width.value != orgTableWidth || formObj.height.value != orgTableHeight)
inst.execCommand('mceRepaint');
tinyMCEPopup.close();
return true;
}
// Create new table
html += '<table';
html += makeAttrib('id', id);
html += makeAttrib('border', border);
html += makeAttrib('cellpadding', cellpadding);
html += makeAttrib('cellspacing', cellspacing);
html += makeAttrib('_mce_new', '1');
if (width && inst.settings.inline_styles) {
if (style)
style += '; ';
// Force px
if (/^[0-9\.]+$/.test(width))
width += 'px';
style += 'width: ' + width;
} else
html += makeAttrib('width', width);
/* if (height) {
if (style)
style += '; ';
style += 'height: ' + height;
}*/
//html += makeAttrib('height', height);
//html += makeAttrib('bordercolor', bordercolor);
//html += makeAttrib('bgcolor', bgcolor);
html += makeAttrib('align', align);
html += makeAttrib('frame', frame);
html += makeAttrib('rules', rules);
html += makeAttrib('class', className);
html += makeAttrib('style', style);
html += makeAttrib('summary', summary);
html += makeAttrib('dir', dir);
html += makeAttrib('lang', lang);
html += '>';
if (caption) {
if (!tinymce.isIE)
html += '<caption><br _mce_bogus="1"/></caption>';
else
html += '<caption></caption>';
}
for (var y=0; y<rows; y++) {
html += "<tr>";
for (var x=0; x<cols; x++) {
if (!tinymce.isIE)
html += '<td><br _mce_bogus="1"/></td>';
else
html += '<td></td>';
}
html += "</tr>";
}
html += "</table>";
inst.execCommand('mceBeginUndoLevel');
// Move table
if (inst.settings.fix_table_elements) {
var patt = '';
inst.focus();
inst.selection.setContent('<br class="_mce_marker" />');
tinymce.each('h1,h2,h3,h4,h5,h6,p'.split(','), function(n) {
if (patt)
patt += ',';
patt += n + ' ._mce_marker';
});
tinymce.each(inst.dom.select(patt), function(n) {
inst.dom.split(inst.dom.getParent(n, 'h1,h2,h3,h4,h5,h6,p'), n);
});
dom.setOuterHTML(dom.select('br._mce_marker')[0], html);
} else
inst.execCommand('mceInsertContent', false, html);
tinymce.each(dom.select('table[_mce_new]'), function(node) {
var td = dom.select('td', node);
inst.selection.select(td[0], true);
inst.selection.collapse();
dom.setAttrib(node, '_mce_new', '');
});
inst.addVisual();
inst.execCommand('mceEndUndoLevel');
tinyMCEPopup.close();
}
function makeAttrib(attrib, value) {
var formObj = document.forms[0];
var valueElm = formObj.elements[attrib];
if (typeof(value) == "undefined" || value == null) {
value = "";
if (valueElm)
value = valueElm.value;
}
if (value == "")
return "";
// XML encode it
value = value.replace(/&/g, '&amp;');
value = value.replace(/\"/g, '&quot;');
value = value.replace(/</g, '&lt;');
value = value.replace(/>/g, '&gt;');
return ' ' + attrib + '="' + value + '"';
}
function init() {
tinyMCEPopup.resizeToInnerSize();
document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor');
document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
var cols = 2, rows = 2, border = tinyMCEPopup.getParam('table_default_border', '0'), cellpadding = tinyMCEPopup.getParam('table_default_cellpadding', ''), cellspacing = tinyMCEPopup.getParam('table_default_cellspacing', '');
var align = "", width = "", height = "", bordercolor = "", bgcolor = "", className = "";
var id = "", summary = "", style = "", dir = "", lang = "", background = "", bgcolor = "", bordercolor = "", rules, frame;
var inst = tinyMCEPopup.editor, dom = inst.dom;
var formObj = document.forms[0];
var elm = dom.getParent(inst.selection.getNode(), "table");
action = tinyMCEPopup.getWindowArg('action');
if (!action)
action = elm ? "update" : "insert";
if (elm && action != "insert") {
var rowsAr = elm.rows;
var cols = 0;
for (var i=0; i<rowsAr.length; i++)
if (rowsAr[i].cells.length > cols)
cols = rowsAr[i].cells.length;
cols = cols;
rows = rowsAr.length;
st = dom.parseStyle(dom.getAttrib(elm, "style"));
border = trimSize(getStyle(elm, 'border', 'borderWidth'));
cellpadding = dom.getAttrib(elm, 'cellpadding', "");
cellspacing = dom.getAttrib(elm, 'cellspacing', "");
width = trimSize(getStyle(elm, 'width', 'width'));
height = trimSize(getStyle(elm, 'height', 'height'));
bordercolor = convertRGBToHex(getStyle(elm, 'bordercolor', 'borderLeftColor'));
bgcolor = convertRGBToHex(getStyle(elm, 'bgcolor', 'backgroundColor'));
align = dom.getAttrib(elm, 'align', align);
frame = dom.getAttrib(elm, 'frame');
rules = dom.getAttrib(elm, 'rules');
className = tinymce.trim(dom.getAttrib(elm, 'class').replace(/mceItem.+/g, ''));
id = dom.getAttrib(elm, 'id');
summary = dom.getAttrib(elm, 'summary');
style = dom.serializeStyle(st);
dir = dom.getAttrib(elm, 'dir');
lang = dom.getAttrib(elm, 'lang');
background = getStyle(elm, 'background', 'backgroundImage').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
formObj.caption.checked = elm.getElementsByTagName('caption').length > 0;
orgTableWidth = width;
orgTableHeight = height;
action = "update";
formObj.insert.value = inst.getLang('update');
}
addClassesToList('class', "table_styles");
TinyMCE_EditableSelects.init();
// Update form
selectByValue(formObj, 'align', align);
selectByValue(formObj, 'tframe', frame);
selectByValue(formObj, 'rules', rules);
selectByValue(formObj, 'class', className, true, true);
formObj.cols.value = cols;
formObj.rows.value = rows;
formObj.border.value = border;
formObj.cellpadding.value = cellpadding;
formObj.cellspacing.value = cellspacing;
formObj.width.value = width;
formObj.height.value = height;
formObj.bordercolor.value = bordercolor;
formObj.bgcolor.value = bgcolor;
formObj.id.value = id;
formObj.summary.value = summary;
formObj.style.value = style;
formObj.dir.value = dir;
formObj.lang.value = lang;
formObj.backgroundimage.value = background;
updateColor('bordercolor_pick', 'bordercolor');
updateColor('bgcolor_pick', 'bgcolor');
// Resize some elements
if (isVisible('backgroundimagebrowser'))
document.getElementById('backgroundimage').style.width = '180px';
// Disable some fields in update mode
if (action == "update") {
formObj.cols.disabled = true;
formObj.rows.disabled = true;
}
}
function changedSize() {
var formObj = document.forms[0];
var st = dom.parseStyle(formObj.style.value);
/* var width = formObj.width.value;
if (width != "")
st['width'] = tinyMCEPopup.getParam("inline_styles") ? getCSSSize(width) : "";
else
st['width'] = "";*/
var height = formObj.height.value;
if (height != "")
st['height'] = getCSSSize(height);
else
st['height'] = "";
formObj.style.value = dom.serializeStyle(st);
}
function changedBackgroundImage() {
var formObj = document.forms[0];
var st = dom.parseStyle(formObj.style.value);
st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
formObj.style.value = dom.serializeStyle(st);
}
function changedBorder() {
var formObj = document.forms[0];
var st = dom.parseStyle(formObj.style.value);
// Update border width if the element has a color
if (formObj.border.value != "" && formObj.bordercolor.value != "")
st['border-width'] = formObj.border.value + "px";
formObj.style.value = dom.serializeStyle(st);
}
function changedColor() {
var formObj = document.forms[0];
var st = dom.parseStyle(formObj.style.value);
st['background-color'] = formObj.bgcolor.value;
if (formObj.bordercolor.value != "") {
st['border-color'] = formObj.bordercolor.value;
// Add border-width if it's missing
if (!st['border-width'])
st['border-width'] = formObj.border.value == "" ? "1px" : formObj.border.value + "px";
}
formObj.style.value = dom.serializeStyle(st);
}
function changedStyle() {
var formObj = document.forms[0];
var st = dom.parseStyle(formObj.style.value);
if (st['background-image'])
formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
else
formObj.backgroundimage.value = '';
if (st['width'])
formObj.width.value = trimSize(st['width']);
if (st['height'])
formObj.height.value = trimSize(st['height']);
if (st['background-color']) {
formObj.bgcolor.value = st['background-color'];
updateColor('bgcolor_pick','bgcolor');
}
if (st['border-color']) {
formObj.bordercolor.value = st['border-color'];
updateColor('bordercolor_pick','bordercolor');
}
}
tinyMCEPopup.onInit.add(init);

View file

@ -0,0 +1,74 @@
tinyMCE.addI18n('en.table_dlg',{
general_tab:"General",
advanced_tab:"Advanced",
general_props:"General properties",
advanced_props:"Advanced properties",
rowtype:"Row in table part",
title:"Insert/Modify table",
width:"Width",
height:"Height",
cols:"Cols",
rows:"Rows",
cellspacing:"Cellspacing",
cellpadding:"Cellpadding",
border:"Border",
align:"Alignment",
align_default:"Default",
align_left:"Left",
align_right:"Right",
align_middle:"Center",
row_title:"Table row properties",
cell_title:"Table cell properties",
cell_type:"Cell type",
valign:"Vertical alignment",
align_top:"Top",
align_bottom:"Bottom",
bordercolor:"Border color",
bgcolor:"Background color",
merge_cells_title:"Merge table cells",
id:"Id",
style:"Style",
langdir:"Language direction",
langcode:"Language code",
mime:"Target MIME type",
ltr:"Left to right",
rtl:"Right to left",
bgimage:"Background image",
summary:"Summary",
td:"Data",
th:"Header",
cell_cell:"Update current cell",
cell_row:"Update all cells in row",
cell_all:"Update all cells in table",
row_row:"Update current row",
row_odd:"Update odd rows in table",
row_even:"Update even rows in table",
row_all:"Update all rows in table",
thead:"Table Head",
tbody:"Table Body",
tfoot:"Table Foot",
scope:"Scope",
rowgroup:"Row Group",
colgroup:"Col Group",
col_limit:"You've exceeded the maximum number of columns of {$cols}.",
row_limit:"You've exceeded the maximum number of rows of {$rows}.",
cell_limit:"You've exceeded the maximum number of cells of {$cells}.",
missing_scope:"Are you sure you want to continue without specifying a scope for this table header cell. Without it, it may be difficult for some users with disabilities to understand the content or data displayed of the table.",
caption:"Table caption",
frame:"Frame",
frame_none:"none",
frame_groups:"groups",
frame_rows:"rows",
frame_cols:"cols",
frame_all:"all",
rules:"Rules",
rules_void:"void",
rules_above:"above",
rules_below:"below",
rules_hsides:"hsides",
rules_lhs:"lhs",
rules_rhs:"rhs",
rules_vsides:"vsides",
rules_box:"box",
rules_border:"border"
});

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{#table_dlg.merge_cells_title}</title>
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="../../utils/mctabs.js"></script>
<script type="text/javascript" src="../../utils/validate.js"></script>
<script type="text/javascript" src="js/merge_cells.js"></script>
</head>
<body style="margin: 8px">
<form onsubmit="MergeCellsDialog.merge();return false;" action="#">
<fieldset>
<legend>{#table_dlg.merge_cells_title}</legend>
<table border="0" cellpadding="0" cellspacing="3" width="100%">
<tr>
<td>{#table_dlg.cols}:</td>
<td align="right"><input type="text" name="numcols" value="" class="number min1 mceFocus" style="width: 30px" /></td>
</tr>
<tr>
<td>{#table_dlg.rows}:</td>
<td align="right"><input type="text" name="numrows" value="" class="number min1" style="width: 30px" /></td>
</tr>
</table>
</fieldset>
<div class="mceActionPanel">
<input type="submit" id="insert" name="insert" value="{#update}" />
<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
</div>
</form>
</body>
</html>

View file

@ -0,0 +1,155 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{#table_dlg.row_title}</title>
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="../../utils/mctabs.js"></script>
<script type="text/javascript" src="../../utils/form_utils.js"></script>
<script type="text/javascript" src="../../utils/editable_selects.js"></script>
<script type="text/javascript" src="js/row.js"></script>
<link href="css/row.css" rel="stylesheet" type="text/css" />
</head>
<body id="tablerow" style="display: none">
<form onsubmit="updateAction();return false;" action="#">
<div class="tabs">
<ul>
<li id="general_tab" class="current"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{#table_dlg.general_tab}</a></span></li>
<li id="advanced_tab"><span><a href="javascript:mcTabs.displayTab('advanced_tab','advanced_panel');" onmousedown="return false;">{#table_dlg.advanced_tab}</a></span></li>
</ul>
</div>
<div class="panel_wrapper">
<div id="general_panel" class="panel current">
<fieldset>
<legend>{#table_dlg.general_props}</legend>
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td><label for="rowtype">{#table_dlg.rowtype}</label></td>
<td class="col2">
<select id="rowtype" name="rowtype" class="mceFocus">
<option value="thead">{#table_dlg.thead}</option>
<option value="tbody">{#table_dlg.tbody}</option>
<option value="tfoot">{#table_dlg.tfoot}</option>
</select>
</td>
</tr>
<tr>
<td><label for="align">{#table_dlg.align}</label></td>
<td class="col2">
<select id="align" name="align">
<option value="">{#not_set}</option>
<option value="center">{#table_dlg.align_middle}</option>
<option value="left">{#table_dlg.align_left}</option>
<option value="right">{#table_dlg.align_right}</option>
</select>
</td>
</tr>
<tr>
<td><label for="valign">{#table_dlg.valign}</label></td>
<td class="col2">
<select id="valign" name="valign">
<option value="">{#not_set}</option>
<option value="top">{#table_dlg.align_top}</option>
<option value="middle">{#table_dlg.align_middle}</option>
<option value="bottom">{#table_dlg.align_bottom}</option>
</select>
</td>
</tr>
<tr id="styleSelectRow">
<td><label for="class">{#class_name}</label></td>
<td class="col2">
<select id="class" name="class" class="mceEditableSelect">
<option value="" selected="selected">{#not_set}</option>
</select>
</td>
</tr>
<tr>
<td><label for="height">{#table_dlg.height}</label></td>
<td class="col2"><input name="height" type="text" id="height" value="" size="4" maxlength="4" onchange="changedSize();" /></td>
</tr>
</table>
</fieldset>
</div>
<div id="advanced_panel" class="panel">
<fieldset>
<legend>{#table_dlg.advanced_props}</legend>
<table border="0" cellpadding="0" cellspacing="4">
<tr>
<td class="column1"><label for="id">{#table_dlg.id}</label></td>
<td><input id="id" name="id" type="text" value="" style="width: 200px" /></td>
</tr>
<tr>
<td><label for="style">{#table_dlg.style}</label></td>
<td><input type="text" id="style" name="style" value="" style="width: 200px;" onchange="changedStyle();" /></td>
</tr>
<tr>
<td class="column1"><label for="dir">{#table_dlg.langdir}</label></td>
<td>
<select id="dir" name="dir" style="width: 200px">
<option value="">{#not_set}</option>
<option value="ltr">{#table_dlg.ltr}</option>
<option value="rtl">{#table_dlg.rtl}</option>
</select>
</td>
</tr>
<tr>
<td class="column1"><label for="lang">{#table_dlg.langcode}</label></td>
<td>
<input id="lang" name="lang" type="text" value="" style="width: 200px" />
</td>
</tr>
<tr>
<td class="column1"><label for="backgroundimage">{#table_dlg.bgimage}</label></td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input id="backgroundimage" name="backgroundimage" type="text" value="" style="width: 200px" onchange="changedBackgroundImage();" /></td>
<td id="backgroundimagebrowsercontainer">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="column1"><label for="bgcolor">{#table_dlg.bgcolor}</label></td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input id="bgcolor" name="bgcolor" type="text" value="" size="9" onchange="updateColor('bgcolor_pick','bgcolor');changedColor();" /></td>
<td id="bgcolor_pickcontainer">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
<div class="mceActionPanel">
<div>
<select id="action" name="action">
<option value="row">{#table_dlg.row_row}</option>
<option value="odd">{#table_dlg.row_odd}</option>
<option value="even">{#table_dlg.row_even}</option>
<option value="all">{#table_dlg.row_all}</option>
</select>
</div>
<input type="submit" id="insert" name="insert" value="{#update}" />
<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
</div>
</form>
</body>
</html>

View file

@ -0,0 +1,187 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{#table_dlg.title}</title>
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="../../utils/mctabs.js"></script>
<script type="text/javascript" src="../../utils/form_utils.js"></script>
<script type="text/javascript" src="../../utils/validate.js"></script>
<script type="text/javascript" src="../../utils/editable_selects.js"></script>
<script type="text/javascript" src="js/table.js"></script>
<link href="css/table.css" rel="stylesheet" type="text/css" />
</head>
<body id="table" style="display: none">
<form onsubmit="insertTable();return false;" action="#">
<div class="tabs">
<ul>
<li id="general_tab" class="current"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{#table_dlg.general_tab}</a></span></li>
<li id="advanced_tab"><span><a href="javascript:mcTabs.displayTab('advanced_tab','advanced_panel');" onmousedown="return false;">{#table_dlg.advanced_tab}</a></span></li>
</ul>
</div>
<div class="panel_wrapper">
<div id="general_panel" class="panel current">
<fieldset>
<legend>{#table_dlg.general_props}</legend>
<table border="0" cellpadding="4" cellspacing="0" width="100%">
<tr>
<td><label id="colslabel" for="cols">{#table_dlg.cols}</label></td>
<td><input id="cols" name="cols" type="text" value="" size="3" maxlength="3" class="required number min1 mceFocus" /></td>
<td><label id="rowslabel" for="rows">{#table_dlg.rows}</label></td>
<td><input id="rows" name="rows" type="text" value="" size="3" maxlength="3" class="required number min1" /></td>
</tr>
<tr>
<td><label id="cellpaddinglabel" for="cellpadding">{#table_dlg.cellpadding}</label></td>
<td><input id="cellpadding" name="cellpadding" type="text" value="" size="3" maxlength="3" class="number" /></td>
<td><label id="cellspacinglabel" for="cellspacing">{#table_dlg.cellspacing}</label></td>
<td><input id="cellspacing" name="cellspacing" type="text" value="" size="3" maxlength="3" class="number" /></td>
</tr>
<tr>
<td><label id="alignlabel" for="align">{#table_dlg.align}</label></td>
<td><select id="align" name="align">
<option value="">{#not_set}</option>
<option value="center">{#table_dlg.align_middle}</option>
<option value="left">{#table_dlg.align_left}</option>
<option value="right">{#table_dlg.align_right}</option>
</select></td>
<td><label id="borderlabel" for="border">{#table_dlg.border}</label></td>
<td><input id="border" name="border" type="text" value="" size="3" maxlength="3" onchange="changedBorder();" class="number" /></td>
</tr>
<tr id="width_row">
<td><label id="widthlabel" for="width">{#table_dlg.width}</label></td>
<td><input name="width" type="text" id="width" value="" size="4" maxlength="4" onchange="changedSize();" class="size" /></td>
<td><label id="heightlabel" for="height">{#table_dlg.height}</label></td>
<td><input name="height" type="text" id="height" value="" size="4" maxlength="4" onchange="changedSize();" class="size" /></td>
</tr>
<tr id="styleSelectRow">
<td><label id="classlabel" for="class">{#class_name}</label></td>
<td colspan="3">
<select id="class" name="class" class="mceEditableSelect">
<option value="" selected="selected">{#not_set}</option>
</select></td>
</tr>
<tr>
<td class="column1"><label for="caption">{#table_dlg.caption}</label></td>
<td><input id="caption" name="caption" type="checkbox" class="checkbox" value="true" /></td>
</tr>
</table>
</fieldset>
</div>
<div id="advanced_panel" class="panel">
<fieldset>
<legend>{#table_dlg.advanced_props}</legend>
<table border="0" cellpadding="0" cellspacing="4">
<tr>
<td class="column1"><label for="id">{#table_dlg.id}</label></td>
<td><input id="id" name="id" type="text" value="" class="advfield" /></td>
</tr>
<tr>
<td class="column1"><label for="summary">{#table_dlg.summary}</label></td>
<td><input id="summary" name="summary" type="text" value="" class="advfield" /></td>
</tr>
<tr>
<td><label for="style">{#table_dlg.style}</label></td>
<td><input type="text" id="style" name="style" value="" class="advfield" onchange="changedStyle();" /></td>
</tr>
<tr>
<td class="column1"><label id="langlabel" for="lang">{#table_dlg.langcode}</label></td>
<td>
<input id="lang" name="lang" type="text" value="" class="advfield" />
</td>
</tr>
<tr>
<td class="column1"><label for="backgroundimage">{#table_dlg.bgimage}</label></td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input id="backgroundimage" name="backgroundimage" type="text" value="" class="advfield" onchange="changedBackgroundImage();" /></td>
<td id="backgroundimagebrowsercontainer">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="column1"><label for="tframe">{#table_dlg.frame}</label></td>
<td>
<select id="tframe" name="tframe" class="advfield">
<option value="">{#not_set}</option>
<option value="void">{#table_dlg.rules_void}</option>
<option value="above">{#table_dlg.rules_above}</option>
<option value="below">{#table_dlg.rules_below}</option>
<option value="hsides">{#table_dlg.rules_hsides}</option>
<option value="lhs">{#table_dlg.rules_lhs}</option>
<option value="rhs">{#table_dlg.rules_rhs}</option>
<option value="vsides">{#table_dlg.rules_vsides}</option>
<option value="box">{#table_dlg.rules_box}</option>
<option value="border">{#table_dlg.rules_border}</option>
</select>
</td>
</tr>
<tr>
<td class="column1"><label for="rules">{#table_dlg.rules}</label></td>
<td>
<select id="rules" name="rules" class="advfield">
<option value="">{#not_set}</option>
<option value="none">{#table_dlg.frame_none}</option>
<option value="groups">{#table_dlg.frame_groups}</option>
<option value="rows">{#table_dlg.frame_rows}</option>
<option value="cols">{#table_dlg.frame_cols}</option>
<option value="all">{#table_dlg.frame_all}</option>
</select>
</td>
</tr>
<tr>
<td class="column1"><label for="dir">{#table_dlg.langdir}</label></td>
<td>
<select id="dir" name="dir" class="advfield">
<option value="">{#not_set}</option>
<option value="ltr">{#table_dlg.ltr}</option>
<option value="rtl">{#table_dlg.rtl}</option>
</select>
</td>
</tr>
<tr>
<td class="column1"><label for="bordercolor">{#table_dlg.bordercolor}</label></td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input id="bordercolor" name="bordercolor" type="text" value="" size="9" onchange="updateColor('bordercolor_pick','bordercolor');changedColor();" /></td>
<td id="bordercolor_pickcontainer">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="column1"><label for="bgcolor">{#table_dlg.bgcolor}</label></td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input id="bgcolor" name="bgcolor" type="text" value="" size="9" onchange="updateColor('bgcolor_pick','bgcolor');changedColor();" /></td>
<td id="bgcolor_pickcontainer">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
<div class="mceActionPanel">
<input type="submit" id="insert" name="insert" value="{#insert}" />
<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
</div>
</form>
</body>
</html>