table.js 25 KB

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