| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717 | /******************************************************************************** KindEditor - WYSIWYG HTML Editor for Internet* Copyright (C) 2006-2011 kindsoft.net** @author Roddy <luolonghao@gmail.com>* @site http://www.kindsoft.net/* @licence http://www.kindsoft.net/license.php*******************************************************************************/KindEditor.plugin('table', function(K) {	var self = this, name = 'table', lang = self.lang(name + '.'), zeroborder = 'ke-zeroborder';	// 取得下一行cell的index	function _getCellIndex(table, row, cell) {		var rowSpanCount = 0;		for (var i = 0, len = row.cells.length; i < len; i++) {			if (row.cells[i] == cell) {				break;			}			rowSpanCount += row.cells[i].rowSpan - 1;		}		return cell.cellIndex - rowSpanCount;	}	self.plugin.table = {		//insert or modify table		prop : function(isInsert) {			var html = [				'<div style="padding:10px 20px;">',				//rows, cols				'<div class="ke-dialog-row">',				'<label for="keRows" style="width:90px;">' + lang.cells + '</label>',				lang.rows + ' <input type="text" id="keRows" class="ke-input-text ke-input-number" name="rows" value="" maxlength="4" />   ',				lang.cols + ' <input type="text" class="ke-input-text ke-input-number" name="cols" value="" maxlength="4" />',				'</div>',				//width, height				'<div class="ke-dialog-row">',				'<label for="keWidth" style="width:90px;">' + lang.size + '</label>',				lang.width + ' <input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" />   ',				'<select name="widthType">',				'<option value="%">' + lang.percent + '</option>',				'<option value="px">' + lang.px + '</option>',				'</select>   ',				lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" />   ',				'<select name="heightType">',				'<option value="%">' + lang.percent + '</option>',				'<option value="px">' + lang.px + '</option>',				'</select>',				'</div>',				//space, padding				'<div class="ke-dialog-row">',				'<label for="kePadding" style="width:90px;">' + lang.space + '</label>',				lang.padding + ' <input type="text" id="kePadding" class="ke-input-text ke-input-number" name="padding" value="" maxlength="4" />   ',				lang.spacing + ' <input type="text" class="ke-input-text ke-input-number" name="spacing" value="" maxlength="4" />',				'</div>',				//align				'<div class="ke-dialog-row">',				'<label for="keAlign" style="width:90px;">' + lang.align + '</label>',				'<select id="keAlign" name="align">',				'<option value="">' + lang.alignDefault + '</option>',				'<option value="left">' + lang.alignLeft + '</option>',				'<option value="center">' + lang.alignCenter + '</option>',				'<option value="right">' + lang.alignRight + '</option>',				'</select>',				'</div>',				//border				'<div class="ke-dialog-row">',				'<label for="keBorder" style="width:90px;">' + lang.border + '</label>',				lang.borderWidth + ' <input type="text" id="keBorder" class="ke-input-text ke-input-number" name="border" value="" maxlength="4" />   ',				lang.borderColor + ' <span class="ke-inline-block ke-input-color"></span>',				'</div>',				//background color				'<div class="ke-dialog-row">',				'<label for="keBgColor" style="width:90px;">' + lang.backgroundColor + '</label>',				'<span class="ke-inline-block ke-input-color"></span>',				'</div>',				'</div>'			].join('');			var picker, currentElement;			function removePicker() {				if (picker) {					picker.remove();					picker = null;					currentElement = null;				}			}			var dialog = self.createDialog({				name : name,				width : 500,				height : 300,				title : self.lang(name),				body : html,				beforeDrag : removePicker,				beforeRemove : function() {					removePicker();					colorBox.unbind();				},				yesBtn : {					name : self.lang('yes'),					click : function(e) {						var rows = rowsBox.val(),							cols = colsBox.val(),							width = widthBox.val(),							height = heightBox.val(),							widthType = widthTypeBox.val(),							heightType = heightTypeBox.val(),							padding = paddingBox.val(),							spacing = spacingBox.val(),							align = alignBox.val(),							border = borderBox.val(),							borderColor = K(colorBox[0]).html() || '',							bgColor = K(colorBox[1]).html() || '';						if (rows == 0 || !/^\d+$/.test(rows)) {							alert(self.lang('invalidRows'));							rowsBox[0].focus();							return;						}						if (cols == 0 || !/^\d+$/.test(cols)) {							alert(self.lang('invalidRows'));							colsBox[0].focus();							return;						}						if (!/^\d*$/.test(width)) {							alert(self.lang('invalidWidth'));							widthBox[0].focus();							return;						}						if (!/^\d*$/.test(height)) {							alert(self.lang('invalidHeight'));							heightBox[0].focus();							return;						}						if (!/^\d*$/.test(padding)) {							alert(self.lang('invalidPadding'));							paddingBox[0].focus();							return;						}						if (!/^\d*$/.test(spacing)) {							alert(self.lang('invalidSpacing'));							spacingBox[0].focus();							return;						}						if (!/^\d*$/.test(border)) {							alert(self.lang('invalidBorder'));							borderBox[0].focus();							return;						}						//modify table						if (table) {							if (width !== '') {								table.width(width + widthType);							} else {								table.css('width', '');							}							if (table[0].width !== undefined) {								table.removeAttr('width');							}							if (height !== '') {								table.height(height + heightType);							} else {								table.css('height', '');							}							if (table[0].height !== undefined) {								table.removeAttr('height');							}							table.css('background-color', bgColor);							if (table[0].bgColor !== undefined) {								table.removeAttr('bgColor');							}							if (padding !== '') {								table[0].cellPadding = padding;							} else {								table.removeAttr('cellPadding');							}							if (spacing !== '') {								table[0].cellSpacing = spacing;							} else {								table.removeAttr('cellSpacing');							}							if (align !== '') {								table[0].align = align;							} else {								table.removeAttr('align');							}							if (border !== '') {								table.attr('border', border);							} else {								table.removeAttr('border');							}							if (border === '' || border === '0') {								table.addClass(zeroborder);							} else {								table.removeClass(zeroborder);							}							if (borderColor !== '') {								table.attr('borderColor', borderColor);							} else {								table.removeAttr('borderColor');							}							self.hideDialog().focus();							return;						}						//insert new table						var style = '';						if (width !== '') {							style += 'width:' + width + widthType + ';';						}						if (height !== '') {							style += 'height:' + height + heightType + ';';						}						if (bgColor !== '') {							style += 'background-color:' + bgColor + ';';						}						var html = '<table';						if (style !== '') {							html += ' style="' + style + '"';						}						if (padding !== '') {							html += ' cellpadding="' + padding + '"';						}						if (spacing !== '') {							html += ' cellspacing="' + spacing + '"';						}						if (align !== '') {							html += ' align="' + align + '"';						}						if (border !== '') {							html += ' border="' + border + '"';						}						if (border === '' || border === '0') {							html += ' class="' + zeroborder + '"';						}						if (borderColor !== '') {							html += ' bordercolor="' + borderColor + '"';						}						html += '>';						for (var i = 0; i < rows; i++) {							html += '<tr>';							for (var j = 0; j < cols; j++) {								html += '<td>' + (K.IE ? ' ' : '<br />') + '</td>';							}							html += '</tr>';						}						html += '</table>';						if (!K.IE) {							html += '<br />';						}						self.insertHtml(html);						self.select().hideDialog().focus();						self.addBookmark();					}				}			}),			div = dialog.div,			rowsBox = K('[name="rows"]', div).val(3),			colsBox = K('[name="cols"]', div).val(2),			widthBox = K('[name="width"]', div).val(100),			heightBox = K('[name="height"]', div),			widthTypeBox = K('[name="widthType"]', div),			heightTypeBox = K('[name="heightType"]', div),			paddingBox = K('[name="padding"]', div).val(2),			spacingBox = K('[name="spacing"]', div).val(0),			alignBox = K('[name="align"]', div),			borderBox = K('[name="border"]', div).val(1),			colorBox = K('.ke-input-color', div);			function setColor(box, color) {				color = color.toUpperCase();				box.css('background-color', color);				box.css('color', color === '#000000' ? '#FFFFFF' : '#000000');				box.html(color);			}			setColor(K(colorBox[0]), '#000000');			setColor(K(colorBox[1]), '');			function clickHandler(e) {				removePicker();				if (!picker || this !== currentElement) {					var box = K(this),						pos = box.pos();					picker = K.colorpicker({						x : pos.x,						y : pos.y + box.height(),						z : 811214,						selectedColor : K(this).html(),						colors : self.colorTable,						noColor : self.lang('noColor'),						shadowMode : self.shadowMode,						click : function(color) {							setColor(box, color);							removePicker();						}					});					currentElement = this;				}			}			colorBox.click(clickHandler);			// foucs and select			rowsBox[0].focus();			rowsBox[0].select();			var table;			if (isInsert) {				return;			}			//get selected table node			table = self.plugin.getSelectedTable();			if (table) {				rowsBox.val(table[0].rows.length);				colsBox.val(table[0].rows.length > 0 ? table[0].rows[0].cells.length : 0);				rowsBox.attr('disabled', true);				colsBox.attr('disabled', true);				var match,					tableWidth = table[0].style.width || table[0].width,					tableHeight = table[0].style.height || table[0].height;				if (tableWidth !== undefined && (match = /^(\d+)((?:px|%)*)$/.exec(tableWidth))) {					widthBox.val(match[1]);					widthTypeBox.val(match[2]);				} else {					widthBox.val('');				}				if (tableHeight !== undefined && (match = /^(\d+)((?:px|%)*)$/.exec(tableHeight))) {					heightBox.val(match[1]);					heightTypeBox.val(match[2]);				}				paddingBox.val(table[0].cellPadding || '');				spacingBox.val(table[0].cellSpacing || '');				alignBox.val(table[0].align || '');				borderBox.val(table[0].border === undefined ? '' : table[0].border);				setColor(K(colorBox[0]), K.toHex(table.attr('borderColor') || ''));				setColor(K(colorBox[1]), K.toHex(table[0].style.backgroundColor || table[0].bgColor || ''));				widthBox[0].focus();				widthBox[0].select();			}		},		//modify cell		cellprop : function() {			var html = [				'<div style="padding:10px 20px;">',				//width, height				'<div class="ke-dialog-row">',				'<label for="keWidth" style="width:90px;">' + lang.size + '</label>',				lang.width + ' <input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" />   ',				'<select name="widthType">',				'<option value="%">' + lang.percent + '</option>',				'<option value="px">' + lang.px + '</option>',				'</select>   ',				lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" />   ',				'<select name="heightType">',				'<option value="%">' + lang.percent + '</option>',				'<option value="px">' + lang.px + '</option>',				'</select>',				'</div>',				//align				'<div class="ke-dialog-row">',				'<label for="keAlign" style="width:90px;">' + lang.align + '</label>',				lang.textAlign + ' <select id="keAlign" name="textAlign">',				'<option value="">' + lang.alignDefault + '</option>',				'<option value="left">' + lang.alignLeft + '</option>',				'<option value="center">' + lang.alignCenter + '</option>',				'<option value="right">' + lang.alignRight + '</option>',				'</select> ',				lang.verticalAlign + ' <select name="verticalAlign">',				'<option value="">' + lang.alignDefault + '</option>',				'<option value="top">' + lang.alignTop + '</option>',				'<option value="middle">' + lang.alignMiddle + '</option>',				'<option value="bottom">' + lang.alignBottom + '</option>',				'<option value="baseline">' + lang.alignBaseline + '</option>',				'</select>',				'</div>',				//border				'<div class="ke-dialog-row">',				'<label for="keBorder" style="width:90px;">' + lang.border + '</label>',				lang.borderWidth + ' <input type="text" id="keBorder" class="ke-input-text ke-input-number" name="border" value="" maxlength="4" />   ',				lang.borderColor + ' <span class="ke-inline-block ke-input-color"></span>',				'</div>',				//background color				'<div class="ke-dialog-row">',				'<label for="keBgColor" style="width:90px;">' + lang.backgroundColor + '</label>',				'<span class="ke-inline-block ke-input-color"></span>',				'</div>',				'</div>'			].join('');			var picker, currentElement;			function removePicker() {				if (picker) {					picker.remove();					picker = null;					currentElement = null;				}			}			var dialog = self.createDialog({				name : name,				width : 500,				height : 220,				title : self.lang('tablecell'),				body : html,				beforeDrag : removePicker,				beforeRemove : function() {					removePicker();					colorBox.unbind();				},				yesBtn : {					name : self.lang('yes'),					click : function(e) {						var width = widthBox.val(),							height = heightBox.val(),							widthType = widthTypeBox.val(),							heightType = heightTypeBox.val(),							padding = paddingBox.val(),							spacing = spacingBox.val(),							textAlign = textAlignBox.val(),							verticalAlign = verticalAlignBox.val(),							border = borderBox.val(),							borderColor = K(colorBox[0]).html() || '',							bgColor = K(colorBox[1]).html() || '';						if (!/^\d*$/.test(width)) {							alert(self.lang('invalidWidth'));							widthBox[0].focus();							return;						}						if (!/^\d*$/.test(height)) {							alert(self.lang('invalidHeight'));							heightBox[0].focus();							return;						}						if (!/^\d*$/.test(border)) {							alert(self.lang('invalidBorder'));							borderBox[0].focus();							return;						}						cell.css({							width : width !== '' ? (width + widthType) : '',							height : height !== '' ? (height + heightType) : '',							'background-color' : bgColor,							'text-align' : textAlign,							'vertical-align' : verticalAlign,							'border-width' : border,							'border-style' : border !== '' ? 'solid' : '',							'border-color' : borderColor						});						self.hideDialog().focus();						self.addBookmark();					}				}			}),			div = dialog.div,			widthBox = K('[name="width"]', div).val(100),			heightBox = K('[name="height"]', div),			widthTypeBox = K('[name="widthType"]', div),			heightTypeBox = K('[name="heightType"]', div),			paddingBox = K('[name="padding"]', div).val(2),			spacingBox = K('[name="spacing"]', div).val(0),			textAlignBox = K('[name="textAlign"]', div),			verticalAlignBox = K('[name="verticalAlign"]', div),			borderBox = K('[name="border"]', div).val(1),			colorBox = K('.ke-input-color', div);			function setColor(box, color) {				color = color.toUpperCase();				box.css('background-color', color);				box.css('color', color === '#000000' ? '#FFFFFF' : '#000000');				box.html(color);			}			setColor(K(colorBox[0]), '#000000');			setColor(K(colorBox[1]), '');			function clickHandler(e) {				removePicker();				if (!picker || this !== currentElement) {					var box = K(this),						pos = box.pos();					picker = K.colorpicker({						x : pos.x,						y : pos.y + box.height(),						z : 811214,						selectedColor : K(this).html(),						colors : self.colorTable,						noColor : self.lang('noColor'),						shadowMode : self.shadowMode,						click : function(color) {							setColor(box, color);							removePicker();						}					});					currentElement = this;				}			}			colorBox.click(clickHandler);			// foucs and select			widthBox[0].focus();			widthBox[0].select();			// get selected cell			var cell = self.plugin.getSelectedCell();			var match,				cellWidth = cell[0].style.width || cell[0].width || '',				cellHeight = cell[0].style.height || cell[0].height || '';			if ((match = /^(\d+)((?:px|%)*)$/.exec(cellWidth))) {				widthBox.val(match[1]);				widthTypeBox.val(match[2]);			} else {				widthBox.val('');			}			if ((match = /^(\d+)((?:px|%)*)$/.exec(cellHeight))) {				heightBox.val(match[1]);				heightTypeBox.val(match[2]);			}			textAlignBox.val(cell[0].style.textAlign || '');			verticalAlignBox.val(cell[0].style.verticalAlign || '');			var border = cell[0].style.borderWidth || '';			if (border) {				border = parseInt(border);			}			borderBox.val(border);			setColor(K(colorBox[0]), K.toHex(cell[0].style.borderColor || ''));			setColor(K(colorBox[1]), K.toHex(cell[0].style.backgroundColor || ''));			widthBox[0].focus();			widthBox[0].select();		},		insert : function() {			this.prop(true);		},		'delete' : function() {			var table = self.plugin.getSelectedTable();			self.cmd.range.setStartBefore(table[0]).collapse(true);			self.cmd.select();			table.remove();			self.addBookmark();		},		colinsert : function(offset) {			var table = self.plugin.getSelectedTable()[0],				row = self.plugin.getSelectedRow()[0],				cell = self.plugin.getSelectedCell()[0],				index = cell.cellIndex + offset;			for (var i = 0, len = table.rows.length; i < len; i++) {				var newRow = table.rows[i],					newCell = newRow.insertCell(index);				newCell.innerHTML = K.IE ? '' : '<br />';				// 调整下一行的单元格index				index = _getCellIndex(table, newRow, newCell);			}			self.cmd.range.selectNodeContents(cell).collapse(true);			self.cmd.select();			self.addBookmark();		},		colinsertleft : function() {			this.colinsert(0);		},		colinsertright : function() {			this.colinsert(1);		},		rowinsert : function(offset) {			var table = self.plugin.getSelectedTable()[0],				row = self.plugin.getSelectedRow()[0],				cell = self.plugin.getSelectedCell()[0],				newRow;			if (offset === 1) {				newRow = table.insertRow(row.rowIndex + (cell.rowSpan - 1) + offset);			} else {				newRow = table.insertRow(row.rowIndex);			}			for (var i = 0, len = row.cells.length; i < len; i++) {				var newCell = newRow.insertCell(i);				// copy colspan				if (offset === 1 && row.cells[i].colSpan > 1) {					newCell.colSpan = row.cells[i].colSpan;				}				newCell.innerHTML = K.IE ? '' : '<br />';			}			self.cmd.range.selectNodeContents(cell).collapse(true);			self.cmd.select();			self.addBookmark();		},		rowinsertabove : function() {			this.rowinsert(0);		},		rowinsertbelow : function() {			this.rowinsert(1);		},		rowmerge : function() {			var table = self.plugin.getSelectedTable()[0],				row = self.plugin.getSelectedRow()[0],				cell = self.plugin.getSelectedCell()[0],				rowIndex = row.rowIndex, // 当前行的index				nextRowIndex = rowIndex + cell.rowSpan, // 下一行的index				nextRow = table.rows[nextRowIndex]; // 下一行			// 最后一行不能合并			if (table.rows.length <= nextRowIndex) {				return;			}			var cellIndex = _getCellIndex(table, row, cell); // 下一行单元格的index			if (nextRow.cells.length <= cellIndex) {				return;			}			var nextCell = nextRow.cells[cellIndex]; // 下一行单元格			// 上下行的colspan不一致时不能合并			if (cell.colSpan !== nextCell.colSpan) {				return;			}			cell.rowSpan += nextCell.rowSpan;			nextRow.deleteCell(cellIndex);			self.cmd.range.selectNodeContents(cell).collapse(true);			self.cmd.select();			self.addBookmark();		},		colmerge : function() {			var table = self.plugin.getSelectedTable()[0],				row = self.plugin.getSelectedRow()[0],				cell = self.plugin.getSelectedCell()[0],				rowIndex = row.rowIndex, // 当前行的index				cellIndex = cell.cellIndex,				nextCellIndex = cellIndex + 1;			// 最后一列不能合并			if (row.cells.length <= nextCellIndex) {				return;			}			var nextCell = row.cells[nextCellIndex];			// 左右列的rowspan不一致时不能合并			if (cell.rowSpan !== nextCell.rowSpan) {				return;			}			cell.colSpan += nextCell.colSpan;			row.deleteCell(nextCellIndex);			self.cmd.range.selectNodeContents(cell).collapse(true);			self.cmd.select();			self.addBookmark();		},		rowsplit : function() {			var table = self.plugin.getSelectedTable()[0],				row = self.plugin.getSelectedRow()[0],				cell = self.plugin.getSelectedCell()[0],				rowIndex = row.rowIndex;			// 不是可分割单元格			if (cell.rowSpan === 1) {				return;			}			var cellIndex = _getCellIndex(table, row, cell);			for (var i = 1, len = cell.rowSpan; i < len; i++) {				var newRow = table.rows[rowIndex + i],					newCell = newRow.insertCell(cellIndex);				if (cell.colSpan > 1) {					newCell.colSpan = cell.colSpan;				}				newCell.innerHTML = K.IE ? '' : '<br />';				// 调整下一行的单元格index				cellIndex = _getCellIndex(table, newRow, newCell);			}			K(cell).removeAttr('rowSpan');			self.cmd.range.selectNodeContents(cell).collapse(true);			self.cmd.select();			self.addBookmark();		},		colsplit : function() {			var table = self.plugin.getSelectedTable()[0],				row = self.plugin.getSelectedRow()[0],				cell = self.plugin.getSelectedCell()[0],				cellIndex = cell.cellIndex;			// 不是可分割单元格			if (cell.colSpan === 1) {				return;			}			for (var i = 1, len = cell.colSpan; i < len; i++) {				var newCell = row.insertCell(cellIndex + i);				if (cell.rowSpan > 1) {					newCell.rowSpan = cell.rowSpan;				}				newCell.innerHTML = K.IE ? '' : '<br />';			}			K(cell).removeAttr('colSpan');			self.cmd.range.selectNodeContents(cell).collapse(true);			self.cmd.select();			self.addBookmark();		},		coldelete : function() {			var table = self.plugin.getSelectedTable()[0],				row = self.plugin.getSelectedRow()[0],				cell = self.plugin.getSelectedCell()[0],				index = cell.cellIndex;			for (var i = 0, len = table.rows.length; i < len; i++) {				var newRow = table.rows[i],					newCell = newRow.cells[index];				if (newCell.colSpan > 1) {					newCell.colSpan -= 1;					if (newCell.colSpan === 1) {						K(newCell).removeAttr('colSpan');					}				} else {					newRow.deleteCell(index);				}				// 跳过不需要删除的行				if (newCell.rowSpan > 1) {					i += newCell.rowSpan - 1;				}			}			if (row.cells.length === 0) {				self.cmd.range.setStartBefore(table).collapse(true);				self.cmd.select();				K(table).remove();			} else {				self.cmd.selection(true);			}			self.addBookmark();		},		rowdelete : function() {			var table = self.plugin.getSelectedTable()[0],				row = self.plugin.getSelectedRow()[0],				cell = self.plugin.getSelectedCell()[0],				rowIndex = row.rowIndex;			// 从下到上删除			for (var i = cell.rowSpan - 1; i >= 0; i--) {				table.deleteRow(rowIndex + i);			}			if (table.rows.length === 0) {				self.cmd.range.setStartBefore(table).collapse(true);				self.cmd.select();				K(table).remove();			} else {				self.cmd.selection(true);			}			self.addBookmark();		}	};	self.clickToolbar(name, self.plugin.table.prop);});
 |