table.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712
  1. /*******************************************************************************
  2. * KindEditor - WYSIWYG HTML Editor for Internet
  3. * Copyright (C) 2006-2011 kindsoft.net
  4. *
  5. * @author Roddy <luolonghao@gmail.com>
  6. * @site http://www.kindsoft.net/
  7. * @licence http://www.kindsoft.net/license.php
  8. *******************************************************************************/
  9. KindEditor.plugin('table', function(K) {
  10. var self = this, name = 'table', lang = self.lang(name + '.'), zeroborder = 'ke-zeroborder';
  11. // 设置颜色
  12. function _setColor(box, color) {
  13. color = color.toUpperCase();
  14. box.css('background-color', color);
  15. box.css('color', color === '#000000' ? '#FFFFFF' : '#000000');
  16. box.html(color);
  17. }
  18. // 初始化取色器
  19. var pickerList = [];
  20. function _initColorPicker(dialogDiv, colorBox) {
  21. colorBox.bind('click,mousedown', function(e){
  22. e.stopPropagation();
  23. });
  24. function removePicker() {
  25. K.each(pickerList, function() {
  26. this.remove();
  27. });
  28. pickerList = [];
  29. K(document).unbind('click,mousedown', removePicker);
  30. dialogDiv.unbind('click,mousedown', removePicker);
  31. }
  32. colorBox.click(function(e) {
  33. removePicker();
  34. var box = K(this),
  35. pos = box.pos();
  36. var picker = K.colorpicker({
  37. x : pos.x,
  38. y : pos.y + box.height(),
  39. z : 811214,
  40. selectedColor : K(this).html(),
  41. colors : self.colorTable,
  42. noColor : self.lang('noColor'),
  43. shadowMode : self.shadowMode,
  44. click : function(color) {
  45. _setColor(box, color);
  46. removePicker();
  47. }
  48. });
  49. pickerList.push(picker);
  50. K(document).bind('click,mousedown', removePicker);
  51. dialogDiv.bind('click,mousedown', removePicker);
  52. });
  53. }
  54. // 取得下一行cell的index
  55. function _getCellIndex(table, row, cell) {
  56. var rowSpanCount = 0;
  57. for (var i = 0, len = row.cells.length; i < len; i++) {
  58. if (row.cells[i] == cell) {
  59. break;
  60. }
  61. rowSpanCount += row.cells[i].rowSpan - 1;
  62. }
  63. return cell.cellIndex - rowSpanCount;
  64. }
  65. self.plugin.table = {
  66. //insert or modify table
  67. prop : function(isInsert) {
  68. var html = [
  69. '<div style="padding:20px;">',
  70. //rows, cols
  71. '<div class="ke-dialog-row">',
  72. '<label for="keRows" style="width:90px;">' + lang.cells + '</label>',
  73. lang.rows + ' <input type="text" id="keRows" class="ke-input-text ke-input-number" name="rows" value="" maxlength="4" /> &nbsp; ',
  74. lang.cols + ' <input type="text" class="ke-input-text ke-input-number" name="cols" value="" maxlength="4" />',
  75. '</div>',
  76. //width, height
  77. '<div class="ke-dialog-row">',
  78. '<label for="keWidth" style="width:90px;">' + lang.size + '</label>',
  79. lang.width + ' <input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> &nbsp; ',
  80. '<select name="widthType">',
  81. '<option value="%">' + lang.percent + '</option>',
  82. '<option value="px">' + lang.px + '</option>',
  83. '</select> &nbsp; ',
  84. lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> &nbsp; ',
  85. '<select name="heightType">',
  86. '<option value="%">' + lang.percent + '</option>',
  87. '<option value="px">' + lang.px + '</option>',
  88. '</select>',
  89. '</div>',
  90. //space, padding
  91. '<div class="ke-dialog-row">',
  92. '<label for="kePadding" style="width:90px;">' + lang.space + '</label>',
  93. lang.padding + ' <input type="text" id="kePadding" class="ke-input-text ke-input-number" name="padding" value="" maxlength="4" /> &nbsp; ',
  94. lang.spacing + ' <input type="text" class="ke-input-text ke-input-number" name="spacing" value="" maxlength="4" />',
  95. '</div>',
  96. //align
  97. '<div class="ke-dialog-row">',
  98. '<label for="keAlign" style="width:90px;">' + lang.align + '</label>',
  99. '<select id="keAlign" name="align">',
  100. '<option value="">' + lang.alignDefault + '</option>',
  101. '<option value="left">' + lang.alignLeft + '</option>',
  102. '<option value="center">' + lang.alignCenter + '</option>',
  103. '<option value="right">' + lang.alignRight + '</option>',
  104. '</select>',
  105. '</div>',
  106. //border
  107. '<div class="ke-dialog-row">',
  108. '<label for="keBorder" style="width:90px;">' + lang.border + '</label>',
  109. lang.borderWidth + ' <input type="text" id="keBorder" class="ke-input-text ke-input-number" name="border" value="" maxlength="4" /> &nbsp; ',
  110. lang.borderColor + ' <span class="ke-inline-block ke-input-color"></span>',
  111. '</div>',
  112. //background color
  113. '<div class="ke-dialog-row">',
  114. '<label for="keBgColor" style="width:90px;">' + lang.backgroundColor + '</label>',
  115. '<span class="ke-inline-block ke-input-color"></span>',
  116. '</div>',
  117. '</div>'
  118. ].join('');
  119. var bookmark = self.cmd.range.createBookmark();
  120. var dialog = self.createDialog({
  121. name : name,
  122. width : 500,
  123. title : self.lang(name),
  124. body : html,
  125. beforeRemove : function() {
  126. colorBox.unbind();
  127. },
  128. yesBtn : {
  129. name : self.lang('yes'),
  130. click : function(e) {
  131. var rows = rowsBox.val(),
  132. cols = colsBox.val(),
  133. width = widthBox.val(),
  134. height = heightBox.val(),
  135. widthType = widthTypeBox.val(),
  136. heightType = heightTypeBox.val(),
  137. padding = paddingBox.val(),
  138. spacing = spacingBox.val(),
  139. align = alignBox.val(),
  140. border = borderBox.val(),
  141. borderColor = K(colorBox[0]).html() || '',
  142. bgColor = K(colorBox[1]).html() || '';
  143. if (rows == 0 || !/^\d+$/.test(rows)) {
  144. alert(self.lang('invalidRows'));
  145. rowsBox[0].focus();
  146. return;
  147. }
  148. if (cols == 0 || !/^\d+$/.test(cols)) {
  149. alert(self.lang('invalidRows'));
  150. colsBox[0].focus();
  151. return;
  152. }
  153. if (!/^\d*$/.test(width)) {
  154. alert(self.lang('invalidWidth'));
  155. widthBox[0].focus();
  156. return;
  157. }
  158. if (!/^\d*$/.test(height)) {
  159. alert(self.lang('invalidHeight'));
  160. heightBox[0].focus();
  161. return;
  162. }
  163. if (!/^\d*$/.test(padding)) {
  164. alert(self.lang('invalidPadding'));
  165. paddingBox[0].focus();
  166. return;
  167. }
  168. if (!/^\d*$/.test(spacing)) {
  169. alert(self.lang('invalidSpacing'));
  170. spacingBox[0].focus();
  171. return;
  172. }
  173. if (!/^\d*$/.test(border)) {
  174. alert(self.lang('invalidBorder'));
  175. borderBox[0].focus();
  176. return;
  177. }
  178. //modify table
  179. if (table) {
  180. if (width !== '') {
  181. table.width(width + widthType);
  182. } else {
  183. table.css('width', '');
  184. }
  185. if (table[0].width !== undefined) {
  186. table.removeAttr('width');
  187. }
  188. if (height !== '') {
  189. table.height(height + heightType);
  190. } else {
  191. table.css('height', '');
  192. }
  193. if (table[0].height !== undefined) {
  194. table.removeAttr('height');
  195. }
  196. table.css('background-color', bgColor);
  197. if (table[0].bgColor !== undefined) {
  198. table.removeAttr('bgColor');
  199. }
  200. if (padding !== '') {
  201. table[0].cellPadding = padding;
  202. } else {
  203. table.removeAttr('cellPadding');
  204. }
  205. if (spacing !== '') {
  206. table[0].cellSpacing = spacing;
  207. } else {
  208. table.removeAttr('cellSpacing');
  209. }
  210. if (align !== '') {
  211. table[0].align = align;
  212. } else {
  213. table.removeAttr('align');
  214. }
  215. if (border !== '') {
  216. table.attr('border', border);
  217. } else {
  218. table.removeAttr('border');
  219. }
  220. if (border === '' || border === '0') {
  221. table.addClass(zeroborder);
  222. } else {
  223. table.removeClass(zeroborder);
  224. }
  225. if (borderColor !== '') {
  226. table.attr('borderColor', borderColor);
  227. } else {
  228. table.removeAttr('borderColor');
  229. }
  230. self.hideDialog().focus();
  231. self.cmd.range.moveToBookmark(bookmark);
  232. self.cmd.select();
  233. self.addBookmark();
  234. return;
  235. }
  236. //insert new table
  237. var style = '';
  238. if (width !== '') {
  239. style += 'width:' + width + widthType + ';';
  240. }
  241. if (height !== '') {
  242. style += 'height:' + height + heightType + ';';
  243. }
  244. if (bgColor !== '') {
  245. style += 'background-color:' + bgColor + ';';
  246. }
  247. var html = '<table';
  248. if (style !== '') {
  249. html += ' style="' + style + '"';
  250. }
  251. if (padding !== '') {
  252. html += ' cellpadding="' + padding + '"';
  253. }
  254. if (spacing !== '') {
  255. html += ' cellspacing="' + spacing + '"';
  256. }
  257. if (align !== '') {
  258. html += ' align="' + align + '"';
  259. }
  260. if (border !== '') {
  261. html += ' border="' + border + '"';
  262. }
  263. if (border === '' || border === '0') {
  264. html += ' class="' + zeroborder + '"';
  265. }
  266. if (borderColor !== '') {
  267. html += ' bordercolor="' + borderColor + '"';
  268. }
  269. html += '>';
  270. for (var i = 0; i < rows; i++) {
  271. html += '<tr>';
  272. for (var j = 0; j < cols; j++) {
  273. html += '<td>' + (K.IE ? '&nbsp;' : '<br />') + '</td>';
  274. }
  275. html += '</tr>';
  276. }
  277. html += '</table>';
  278. if (!K.IE) {
  279. html += '<br />';
  280. }
  281. self.insertHtml(html);
  282. self.select().hideDialog().focus();
  283. self.addBookmark();
  284. }
  285. }
  286. }),
  287. div = dialog.div,
  288. rowsBox = K('[name="rows"]', div).val(3),
  289. colsBox = K('[name="cols"]', div).val(2),
  290. widthBox = K('[name="width"]', div).val(100),
  291. heightBox = K('[name="height"]', div),
  292. widthTypeBox = K('[name="widthType"]', div),
  293. heightTypeBox = K('[name="heightType"]', div),
  294. paddingBox = K('[name="padding"]', div).val(2),
  295. spacingBox = K('[name="spacing"]', div).val(0),
  296. alignBox = K('[name="align"]', div),
  297. borderBox = K('[name="border"]', div).val(1),
  298. colorBox = K('.ke-input-color', div);
  299. _initColorPicker(div, colorBox.eq(0));
  300. _initColorPicker(div, colorBox.eq(1));
  301. _setColor(colorBox.eq(0), '#000000');
  302. _setColor(colorBox.eq(1), '');
  303. // foucs and select
  304. rowsBox[0].focus();
  305. rowsBox[0].select();
  306. var table;
  307. if (isInsert) {
  308. return;
  309. }
  310. //get selected table node
  311. table = self.plugin.getSelectedTable();
  312. if (table) {
  313. rowsBox.val(table[0].rows.length);
  314. colsBox.val(table[0].rows.length > 0 ? table[0].rows[0].cells.length : 0);
  315. rowsBox.attr('disabled', true);
  316. colsBox.attr('disabled', true);
  317. var match,
  318. tableWidth = table[0].style.width || table[0].width,
  319. tableHeight = table[0].style.height || table[0].height;
  320. if (tableWidth !== undefined && (match = /^(\d+)((?:px|%)*)$/.exec(tableWidth))) {
  321. widthBox.val(match[1]);
  322. widthTypeBox.val(match[2]);
  323. } else {
  324. widthBox.val('');
  325. }
  326. if (tableHeight !== undefined && (match = /^(\d+)((?:px|%)*)$/.exec(tableHeight))) {
  327. heightBox.val(match[1]);
  328. heightTypeBox.val(match[2]);
  329. }
  330. paddingBox.val(table[0].cellPadding || '');
  331. spacingBox.val(table[0].cellSpacing || '');
  332. alignBox.val(table[0].align || '');
  333. borderBox.val(table[0].border === undefined ? '' : table[0].border);
  334. _setColor(colorBox.eq(0), K.toHex(table.attr('borderColor') || ''));
  335. _setColor(colorBox.eq(1), K.toHex(table[0].style.backgroundColor || table[0].bgColor || ''));
  336. widthBox[0].focus();
  337. widthBox[0].select();
  338. }
  339. },
  340. //modify cell
  341. cellprop : function() {
  342. var html = [
  343. '<div style="padding:20px;">',
  344. //width, height
  345. '<div class="ke-dialog-row">',
  346. '<label for="keWidth" style="width:90px;">' + lang.size + '</label>',
  347. lang.width + ' <input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> &nbsp; ',
  348. '<select name="widthType">',
  349. '<option value="%">' + lang.percent + '</option>',
  350. '<option value="px">' + lang.px + '</option>',
  351. '</select> &nbsp; ',
  352. lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> &nbsp; ',
  353. '<select name="heightType">',
  354. '<option value="%">' + lang.percent + '</option>',
  355. '<option value="px">' + lang.px + '</option>',
  356. '</select>',
  357. '</div>',
  358. //align
  359. '<div class="ke-dialog-row">',
  360. '<label for="keAlign" style="width:90px;">' + lang.align + '</label>',
  361. lang.textAlign + ' <select id="keAlign" name="textAlign">',
  362. '<option value="">' + lang.alignDefault + '</option>',
  363. '<option value="left">' + lang.alignLeft + '</option>',
  364. '<option value="center">' + lang.alignCenter + '</option>',
  365. '<option value="right">' + lang.alignRight + '</option>',
  366. '</select> ',
  367. lang.verticalAlign + ' <select name="verticalAlign">',
  368. '<option value="">' + lang.alignDefault + '</option>',
  369. '<option value="top">' + lang.alignTop + '</option>',
  370. '<option value="middle">' + lang.alignMiddle + '</option>',
  371. '<option value="bottom">' + lang.alignBottom + '</option>',
  372. '<option value="baseline">' + lang.alignBaseline + '</option>',
  373. '</select>',
  374. '</div>',
  375. //border
  376. '<div class="ke-dialog-row">',
  377. '<label for="keBorder" style="width:90px;">' + lang.border + '</label>',
  378. lang.borderWidth + ' <input type="text" id="keBorder" class="ke-input-text ke-input-number" name="border" value="" maxlength="4" /> &nbsp; ',
  379. lang.borderColor + ' <span class="ke-inline-block ke-input-color"></span>',
  380. '</div>',
  381. //background color
  382. '<div class="ke-dialog-row">',
  383. '<label for="keBgColor" style="width:90px;">' + lang.backgroundColor + '</label>',
  384. '<span class="ke-inline-block ke-input-color"></span>',
  385. '</div>',
  386. '</div>'
  387. ].join('');
  388. var bookmark = self.cmd.range.createBookmark();
  389. var dialog = self.createDialog({
  390. name : name,
  391. width : 500,
  392. title : self.lang('tablecell'),
  393. body : html,
  394. beforeRemove : function() {
  395. colorBox.unbind();
  396. },
  397. yesBtn : {
  398. name : self.lang('yes'),
  399. click : function(e) {
  400. var width = widthBox.val(),
  401. height = heightBox.val(),
  402. widthType = widthTypeBox.val(),
  403. heightType = heightTypeBox.val(),
  404. padding = paddingBox.val(),
  405. spacing = spacingBox.val(),
  406. textAlign = textAlignBox.val(),
  407. verticalAlign = verticalAlignBox.val(),
  408. border = borderBox.val(),
  409. borderColor = K(colorBox[0]).html() || '',
  410. bgColor = K(colorBox[1]).html() || '';
  411. if (!/^\d*$/.test(width)) {
  412. alert(self.lang('invalidWidth'));
  413. widthBox[0].focus();
  414. return;
  415. }
  416. if (!/^\d*$/.test(height)) {
  417. alert(self.lang('invalidHeight'));
  418. heightBox[0].focus();
  419. return;
  420. }
  421. if (!/^\d*$/.test(border)) {
  422. alert(self.lang('invalidBorder'));
  423. borderBox[0].focus();
  424. return;
  425. }
  426. cell.css({
  427. width : width !== '' ? (width + widthType) : '',
  428. height : height !== '' ? (height + heightType) : '',
  429. 'background-color' : bgColor,
  430. 'text-align' : textAlign,
  431. 'vertical-align' : verticalAlign,
  432. 'border-width' : border,
  433. 'border-style' : border !== '' ? 'solid' : '',
  434. 'border-color' : borderColor
  435. });
  436. self.hideDialog().focus();
  437. self.cmd.range.moveToBookmark(bookmark);
  438. self.cmd.select();
  439. self.addBookmark();
  440. }
  441. }
  442. }),
  443. div = dialog.div,
  444. widthBox = K('[name="width"]', div).val(100),
  445. heightBox = K('[name="height"]', div),
  446. widthTypeBox = K('[name="widthType"]', div),
  447. heightTypeBox = K('[name="heightType"]', div),
  448. paddingBox = K('[name="padding"]', div).val(2),
  449. spacingBox = K('[name="spacing"]', div).val(0),
  450. textAlignBox = K('[name="textAlign"]', div),
  451. verticalAlignBox = K('[name="verticalAlign"]', div),
  452. borderBox = K('[name="border"]', div).val(1),
  453. colorBox = K('.ke-input-color', div);
  454. _initColorPicker(div, colorBox.eq(0));
  455. _initColorPicker(div, colorBox.eq(1));
  456. _setColor(colorBox.eq(0), '#000000');
  457. _setColor(colorBox.eq(1), '');
  458. // foucs and select
  459. widthBox[0].focus();
  460. widthBox[0].select();
  461. // get selected cell
  462. var cell = self.plugin.getSelectedCell();
  463. var match,
  464. cellWidth = cell[0].style.width || cell[0].width || '',
  465. cellHeight = cell[0].style.height || cell[0].height || '';
  466. if ((match = /^(\d+)((?:px|%)*)$/.exec(cellWidth))) {
  467. widthBox.val(match[1]);
  468. widthTypeBox.val(match[2]);
  469. } else {
  470. widthBox.val('');
  471. }
  472. if ((match = /^(\d+)((?:px|%)*)$/.exec(cellHeight))) {
  473. heightBox.val(match[1]);
  474. heightTypeBox.val(match[2]);
  475. }
  476. textAlignBox.val(cell[0].style.textAlign || '');
  477. verticalAlignBox.val(cell[0].style.verticalAlign || '');
  478. var border = cell[0].style.borderWidth || '';
  479. if (border) {
  480. border = parseInt(border);
  481. }
  482. borderBox.val(border);
  483. _setColor(colorBox.eq(0), K.toHex(cell[0].style.borderColor || ''));
  484. _setColor(colorBox.eq(1), K.toHex(cell[0].style.backgroundColor || ''));
  485. widthBox[0].focus();
  486. widthBox[0].select();
  487. },
  488. insert : function() {
  489. this.prop(true);
  490. },
  491. 'delete' : function() {
  492. var table = self.plugin.getSelectedTable();
  493. self.cmd.range.setStartBefore(table[0]).collapse(true);
  494. self.cmd.select();
  495. table.remove();
  496. self.addBookmark();
  497. },
  498. colinsert : function(offset) {
  499. var table = self.plugin.getSelectedTable()[0],
  500. row = self.plugin.getSelectedRow()[0],
  501. cell = self.plugin.getSelectedCell()[0],
  502. index = cell.cellIndex + offset;
  503. // 取得第一行的index
  504. index += table.rows[0].cells.length - row.cells.length;
  505. for (var i = 0, len = table.rows.length; i < len; i++) {
  506. var newRow = table.rows[i],
  507. newCell = newRow.insertCell(index);
  508. newCell.innerHTML = K.IE ? '' : '<br />';
  509. // 调整下一行的单元格index
  510. index = _getCellIndex(table, newRow, newCell);
  511. }
  512. self.cmd.range.selectNodeContents(cell).collapse(true);
  513. self.cmd.select();
  514. self.addBookmark();
  515. },
  516. colinsertleft : function() {
  517. this.colinsert(0);
  518. },
  519. colinsertright : function() {
  520. this.colinsert(1);
  521. },
  522. rowinsert : function(offset) {
  523. var table = self.plugin.getSelectedTable()[0],
  524. row = self.plugin.getSelectedRow()[0],
  525. cell = self.plugin.getSelectedCell()[0];
  526. var rowIndex = row.rowIndex;
  527. if (offset === 1) {
  528. rowIndex = row.rowIndex + (cell.rowSpan - 1) + offset;
  529. }
  530. var newRow = table.insertRow(rowIndex);
  531. for (var i = 0, len = row.cells.length; i < len; i++) {
  532. // 调整cell个数
  533. if (row.cells[i].rowSpan > 1) {
  534. len -= row.cells[i].rowSpan - 1;
  535. }
  536. var newCell = newRow.insertCell(i);
  537. // copy colspan
  538. if (offset === 1 && row.cells[i].colSpan > 1) {
  539. newCell.colSpan = row.cells[i].colSpan;
  540. }
  541. newCell.innerHTML = K.IE ? '' : '<br />';
  542. }
  543. // 调整rowspan
  544. for (var j = rowIndex; j >= 0; j--) {
  545. var cells = table.rows[j].cells;
  546. if (cells.length > i) {
  547. for (var k = cell.cellIndex; k >= 0; k--) {
  548. if (cells[k].rowSpan > 1) {
  549. cells[k].rowSpan += 1;
  550. }
  551. }
  552. break;
  553. }
  554. }
  555. self.cmd.range.selectNodeContents(cell).collapse(true);
  556. self.cmd.select();
  557. self.addBookmark();
  558. },
  559. rowinsertabove : function() {
  560. this.rowinsert(0);
  561. },
  562. rowinsertbelow : function() {
  563. this.rowinsert(1);
  564. },
  565. rowmerge : function() {
  566. var table = self.plugin.getSelectedTable()[0],
  567. row = self.plugin.getSelectedRow()[0],
  568. cell = self.plugin.getSelectedCell()[0],
  569. rowIndex = row.rowIndex, // 当前行的index
  570. nextRowIndex = rowIndex + cell.rowSpan, // 下一行的index
  571. nextRow = table.rows[nextRowIndex]; // 下一行
  572. // 最后一行不能合并
  573. if (table.rows.length <= nextRowIndex) {
  574. return;
  575. }
  576. var cellIndex = cell.cellIndex; // 下一行单元格的index
  577. if (nextRow.cells.length <= cellIndex) {
  578. return;
  579. }
  580. var nextCell = nextRow.cells[cellIndex]; // 下一行单元格
  581. // 上下行的colspan不一致时不能合并
  582. if (cell.colSpan !== nextCell.colSpan) {
  583. return;
  584. }
  585. cell.rowSpan += nextCell.rowSpan;
  586. nextRow.deleteCell(cellIndex);
  587. self.cmd.range.selectNodeContents(cell).collapse(true);
  588. self.cmd.select();
  589. self.addBookmark();
  590. },
  591. colmerge : function() {
  592. var table = self.plugin.getSelectedTable()[0],
  593. row = self.plugin.getSelectedRow()[0],
  594. cell = self.plugin.getSelectedCell()[0],
  595. rowIndex = row.rowIndex, // 当前行的index
  596. cellIndex = cell.cellIndex,
  597. nextCellIndex = cellIndex + 1;
  598. // 最后一列不能合并
  599. if (row.cells.length <= nextCellIndex) {
  600. return;
  601. }
  602. var nextCell = row.cells[nextCellIndex];
  603. // 左右列的rowspan不一致时不能合并
  604. if (cell.rowSpan !== nextCell.rowSpan) {
  605. return;
  606. }
  607. cell.colSpan += nextCell.colSpan;
  608. row.deleteCell(nextCellIndex);
  609. self.cmd.range.selectNodeContents(cell).collapse(true);
  610. self.cmd.select();
  611. self.addBookmark();
  612. },
  613. rowsplit : function() {
  614. var table = self.plugin.getSelectedTable()[0],
  615. row = self.plugin.getSelectedRow()[0],
  616. cell = self.plugin.getSelectedCell()[0],
  617. rowIndex = row.rowIndex;
  618. // 不是可分割单元格
  619. if (cell.rowSpan === 1) {
  620. return;
  621. }
  622. var cellIndex = _getCellIndex(table, row, cell);
  623. for (var i = 1, len = cell.rowSpan; i < len; i++) {
  624. var newRow = table.rows[rowIndex + i],
  625. newCell = newRow.insertCell(cellIndex);
  626. if (cell.colSpan > 1) {
  627. newCell.colSpan = cell.colSpan;
  628. }
  629. newCell.innerHTML = K.IE ? '' : '<br />';
  630. // 调整下一行的单元格index
  631. cellIndex = _getCellIndex(table, newRow, newCell);
  632. }
  633. K(cell).removeAttr('rowSpan');
  634. self.cmd.range.selectNodeContents(cell).collapse(true);
  635. self.cmd.select();
  636. self.addBookmark();
  637. },
  638. colsplit : function() {
  639. var table = self.plugin.getSelectedTable()[0],
  640. row = self.plugin.getSelectedRow()[0],
  641. cell = self.plugin.getSelectedCell()[0],
  642. cellIndex = cell.cellIndex;
  643. // 不是可分割单元格
  644. if (cell.colSpan === 1) {
  645. return;
  646. }
  647. for (var i = 1, len = cell.colSpan; i < len; i++) {
  648. var newCell = row.insertCell(cellIndex + i);
  649. if (cell.rowSpan > 1) {
  650. newCell.rowSpan = cell.rowSpan;
  651. }
  652. newCell.innerHTML = K.IE ? '' : '<br />';
  653. }
  654. K(cell).removeAttr('colSpan');
  655. self.cmd.range.selectNodeContents(cell).collapse(true);
  656. self.cmd.select();
  657. self.addBookmark();
  658. },
  659. coldelete : function() {
  660. var table = self.plugin.getSelectedTable()[0],
  661. row = self.plugin.getSelectedRow()[0],
  662. cell = self.plugin.getSelectedCell()[0],
  663. index = cell.cellIndex;
  664. for (var i = 0, len = table.rows.length; i < len; i++) {
  665. var newRow = table.rows[i],
  666. newCell = newRow.cells[index];
  667. if (newCell.colSpan > 1) {
  668. newCell.colSpan -= 1;
  669. if (newCell.colSpan === 1) {
  670. K(newCell).removeAttr('colSpan');
  671. }
  672. } else {
  673. newRow.deleteCell(index);
  674. }
  675. // 跳过不需要删除的行
  676. if (newCell.rowSpan > 1) {
  677. i += newCell.rowSpan - 1;
  678. }
  679. }
  680. if (row.cells.length === 0) {
  681. self.cmd.range.setStartBefore(table).collapse(true);
  682. self.cmd.select();
  683. K(table).remove();
  684. } else {
  685. self.cmd.selection(true);
  686. }
  687. self.addBookmark();
  688. },
  689. rowdelete : function() {
  690. var table = self.plugin.getSelectedTable()[0],
  691. row = self.plugin.getSelectedRow()[0],
  692. cell = self.plugin.getSelectedCell()[0],
  693. rowIndex = row.rowIndex;
  694. // 从下到上删除
  695. for (var i = cell.rowSpan - 1; i >= 0; i--) {
  696. table.deleteRow(rowIndex + i);
  697. }
  698. if (table.rows.length === 0) {
  699. self.cmd.range.setStartBefore(table).collapse(true);
  700. self.cmd.select();
  701. K(table).remove();
  702. } else {
  703. self.cmd.selection(true);
  704. }
  705. self.addBookmark();
  706. }
  707. };
  708. self.clickToolbar(name, self.plugin.table.prop);
  709. });