table.js 23 KB

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