',
//width, height
@@ -10200,7 +10184,6 @@ KindEditor.plugin('table', function(K) {
//border
'
',
'',
- lang.borderWidth + ' ',
lang.borderColor + ' ',
'
',
//background color
@@ -10212,59 +10195,52 @@ KindEditor.plugin('table', function(K) {
].join('');
var bookmark = self.cmd.range.createBookmark();
var dialog = self.createDialog({
- name: name,
- width: 500,
- title: self.lang('tablecell'),
- body: html,
- beforeRemove: function() {
- 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.cmd.range.moveToBookmark(bookmark);
- self.cmd.select();
- self.addBookmark();
+ name: name,
+ width: 500,
+ title: self.lang('tablecell'),
+ body: html,
+ beforeRemove: function () {
+ 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(),
+ 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;
+ }
+ cell.css({
+ width: width !== '' ? (width + widthType) : '',
+ height: height !== '' ? (height + heightType) : '',
+ 'background-color': bgColor,
+ 'text-align': textAlign,
+ 'vertical-align': verticalAlign,
+ 'border-style': 'solid',
+ 'border-color': borderColor
+ });
+ self.hideDialog().focus();
+ self.cmd.range.moveToBookmark(bookmark);
+ self.cmd.select();
+ self.addBookmark();
}
- }),
+ }
+ }),
div = dialog.div,
widthBox = K('[name="width"]', div).val(100),
heightBox = K('[name="height"]', div),
@@ -10274,7 +10250,6 @@ KindEditor.plugin('table', function(K) {
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);
_initColorPicker(div, colorBox.eq(0));
_initColorPicker(div, colorBox.eq(1));
@@ -10288,39 +10263,34 @@ KindEditor.plugin('table', function(K) {
var match,
cellWidth = cell[0].style.width || cell[0].width || '',
cellHeight = cell[0].style.height || cell[0].height || '';
- if((match = /^(\d+)((?:px|%)*)$/.exec(cellWidth))) {
+ if ((match = /^(\d+)((?:px|%)*)$/.exec(cellWidth))) {
widthBox.val(match[1]);
widthTypeBox.val(match[2]);
} else {
widthBox.val('');
}
- if((match = /^(\d+)((?:px|%)*)$/.exec(cellHeight))) {
+ 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(colorBox.eq(0), K.toHex(cell[0].style.borderColor || ''));
_setColor(colorBox.eq(1), K.toHex(cell[0].style.backgroundColor || ''));
widthBox[0].focus();
widthBox[0].select();
},
- insert: function() {
- this.prop(true);
+ insert: function () {
+ console.warn('Table insert not available.');
},
- 'delete': function() {
+ '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) {
+ colinsert: function (offset) {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0],
@@ -10328,9 +10298,12 @@ KindEditor.plugin('table', function(K) {
// 取得第一行的index
index += table.rows[0].cells.length - row.cells.length;
- for(var i = 0, len = table.rows.length; i < len; i++) {
+ for (var i = 0, len = table.rows.length; i < len; i++) {
var newRow = table.rows[i],
newCell = newRow.insertCell(index);
+ if (newRow.parentNode.tagName === 'THEAD') {
+ newCell.outerHTML = '
| ';
+ }
newCell.innerHTML = K.IE ? '' : '
';
// 调整下一行的单元格index
index = _getCellIndex(table, newRow, newCell);
@@ -10339,40 +10312,40 @@ KindEditor.plugin('table', function(K) {
self.cmd.select();
self.addBookmark();
},
- colinsertleft: function() {
+ colinsertleft: function () {
this.colinsert(0);
},
- colinsertright: function() {
+ colinsertright: function () {
this.colinsert(1);
},
- rowinsert: function(offset) {
+ rowinsert: function (offset) {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0];
var rowIndex = row.rowIndex;
- if(offset === 1) {
+ if (offset === 1) {
rowIndex = row.rowIndex + (cell.rowSpan - 1) + offset;
}
var newRow = table.insertRow(rowIndex);
- for(var i = 0, len = row.cells.length; i < len; i++) {
+ for (var i = 0, len = row.cells.length; i < len; i++) {
// 调整cell个数
- if(row.cells[i].rowSpan > 1) {
+ if (row.cells[i].rowSpan > 1) {
len -= row.cells[i].rowSpan - 1;
}
var newCell = newRow.insertCell(i);
// copy colspan
- if(offset === 1 && row.cells[i].colSpan > 1) {
+ if (offset === 1 && row.cells[i].colSpan > 1) {
newCell.colSpan = row.cells[i].colSpan;
}
newCell.innerHTML = K.IE ? '' : '
';
}
// 调整rowspan
- for(var j = rowIndex; j >= 0; j--) {
+ for (var j = rowIndex; j >= 0; j--) {
var cells = table.rows[j].cells;
- if(cells.length > i) {
- for(var k = cell.cellIndex; k >= 0; k--) {
- if(cells[k].rowSpan > 1) {
+ if (cells.length > i) {
+ for (var k = cell.cellIndex; k >= 0; k--) {
+ if (cells[k].rowSpan > 1) {
cells[k].rowSpan += 1;
}
}
@@ -10383,13 +10356,13 @@ KindEditor.plugin('table', function(K) {
self.cmd.select();
self.addBookmark();
},
- rowinsertabove: function() {
+ rowinsertabove: function () {
this.rowinsert(0);
},
- rowinsertbelow: function() {
+ rowinsertbelow: function () {
this.rowinsert(1);
},
- rowmerge: function() {
+ rowmerge: function () {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0],
@@ -10397,16 +10370,16 @@ KindEditor.plugin('table', function(K) {
nextRowIndex = rowIndex + cell.rowSpan, // 下一行的index
nextRow = table.rows[nextRowIndex]; // 下一行
// 最后一行不能合并
- if(table.rows.length <= nextRowIndex) {
+ if (table.rows.length <= nextRowIndex) {
return;
}
var cellIndex = cell.cellIndex; // 下一行单元格的index
- if(nextRow.cells.length <= cellIndex) {
+ if (nextRow.cells.length <= cellIndex) {
return;
}
var nextCell = nextRow.cells[cellIndex]; // 下一行单元格
// 上下行的colspan不一致时不能合并
- if(cell.colSpan !== nextCell.colSpan) {
+ if (cell.colSpan !== nextCell.colSpan) {
return;
}
cell.rowSpan += nextCell.rowSpan;
@@ -10415,7 +10388,7 @@ KindEditor.plugin('table', function(K) {
self.cmd.select();
self.addBookmark();
},
- colmerge: function() {
+ colmerge: function () {
var table = self.plugin.getSelectedTable()[0],
row = self.plugin.getSelectedRow()[0],
cell = self.plugin.getSelectedCell()[0],
@@ -10423,12 +10396,12 @@ KindEditor.plugin('table', function(K) {
cellIndex = cell.cellIndex,
nextCellIndex = cellIndex + 1;
// 最后一列不能合并
- if(row.cells.length <= nextCellIndex) {
+ if (row.cells.length <= nextCellIndex) {
return;
}
var nextCell = row.cells[nextCellIndex];
// 左右列的rowspan不一致时不能合并
- if(cell.rowSpan !== nextCell.rowSpan) {
+ if (cell.rowSpan !== nextCell.rowSpan) {
return;
}
cell.colSpan += nextCell.colSpan;
@@ -10437,20 +10410,20 @@ KindEditor.plugin('table', function(K) {
self.cmd.select();
self.addBookmark();
},
- rowsplit: function() {
+ 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) {
+ if (cell.rowSpan === 1) {
return;
}
var cellIndex = _getCellIndex(table, row, cell);
- for(var i = 1, len = cell.rowSpan; i < len; i++) {
+ for (var i = 1, len = cell.rowSpan; i < len; i++) {
var newRow = table.rows[rowIndex + i],
newCell = newRow.insertCell(cellIndex);
- if(cell.colSpan > 1) {
+ if (cell.colSpan > 1) {
newCell.colSpan = cell.colSpan;
}
newCell.innerHTML = K.IE ? '' : '
';
@@ -10462,18 +10435,18 @@ KindEditor.plugin('table', function(K) {
self.cmd.select();
self.addBookmark();
},
- colsplit: function() {
+ 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) {
+ if (cell.colSpan === 1) {
return;
}
- for(var i = 1, len = cell.colSpan; i < len; i++) {
+ for (var i = 1, len = cell.colSpan; i < len; i++) {
var newCell = row.insertCell(cellIndex + i);
- if(cell.rowSpan > 1) {
+ if (cell.rowSpan > 1) {
newCell.rowSpan = cell.rowSpan;
}
newCell.innerHTML = K.IE ? '' : '
';
@@ -10483,28 +10456,28 @@ KindEditor.plugin('table', function(K) {
self.cmd.select();
self.addBookmark();
},
- coldelete: function() {
+ 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++) {
+ for (var i = 0, len = table.rows.length; i < len; i++) {
var newRow = table.rows[i],
newCell = newRow.cells[index];
- if(newCell.colSpan > 1) {
+ if (newCell.colSpan > 1) {
newCell.colSpan -= 1;
- if(newCell.colSpan === 1) {
+ if (newCell.colSpan === 1) {
K(newCell).removeAttr('colSpan');
}
} else {
newRow.deleteCell(index);
}
// 跳过不需要删除的行
- if(newCell.rowSpan > 1) {
+ if (newCell.rowSpan > 1) {
i += newCell.rowSpan - 1;
}
}
- if(row.cells.length === 0) {
+ if (row.cells.length === 0) {
self.cmd.range.setStartBefore(table).collapse(true);
self.cmd.select();
K(table).remove();
@@ -10513,16 +10486,16 @@ KindEditor.plugin('table', function(K) {
}
self.addBookmark();
},
- rowdelete: function() {
+ 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--) {
+ for (var i = cell.rowSpan - 1; i >= 0; i--) {
table.deleteRow(rowIndex + i);
}
- if(table.rows.length === 0) {
+ if (table.rows.length === 0) {
self.cmd.range.setStartBefore(table).collapse(true);
self.cmd.select();
K(table).remove();
@@ -10532,7 +10505,65 @@ KindEditor.plugin('table', function(K) {
self.addBookmark();
}
};
- self.clickToolbar(name, self.plugin.table.prop);
+
+ self.clickToolbar(name, function () {
+ if (self.menu) return;
+
+ var menu = self.createMenu({
+ name: name,
+ beforeRemove: function () {
+ removeEvent();
+ }
+ });
+
+ var $wrapperDiv = $('
');
+ var $header = $('');
+ $wrapperDiv.append($header);
+ var $grid = $('
');
+ $grid.on('mouseenter.kTable', '.ke-plugin-table-grid-cell', function () {
+ var $cell = $(this);
+ var row = $cell.data('row');
+ var col = $cell.data('col');
+ $header.text(lang.xRxC.format(row, col));
+ var $cells = $grid.find('.ke-plugin-table-grid-cell');
+ $cells.each(function () {
+ var $c = $(this);
+ var r = $c.data('row');
+ var c = $c.data('col');
+ if (r <= row && c <= col) {
+ $c.css({
+ border: '1px solid #2286d2',
+ background: '#eff7ff'
+ });
+ } else {
+ $c.css({
+ border: '1px solid #ddd',
+ background: '#f1f1f1'
+ });
+ }
+ });
+ }).on('click.kTable', '.ke-plugin-table-grid-cell', function (e) {
+ var $cell = $(this);
+ var row = $cell.data('row');
+ var col = $cell.data('col');
+ insertTable(row, col);
+ self.hideMenu().focus();
+ self.addBookmark();
+ e.stopPropagation();
+ });
+ for (var r = 1; r < 11; r++) {
+ for (var c = 1; c < 11; c++) {
+ $grid.append('
');
+ }
+ }
+ $elements.push($grid);
+ $wrapperDiv.append($grid);
+ menu.div.append($wrapperDiv[0]);
+ });
+});
+
+KindEditor.lang({
+ table: KindEditor.lang('table')
});
/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
diff --git a/src/less/modules/kindeditor.less b/src/less/modules/kindeditor.less
index 75acf8fbea4614aca9243e0a2c6560bfddf162ff..be5994e653c85c2737eb143902d7f15f52c1f257 100644
--- a/src/less/modules/kindeditor.less
+++ b/src/less/modules/kindeditor.less
@@ -9,12 +9,11 @@
/// GNU LESSER GENERAL PUBLIC LICENSE
/// https://github.com/kindsoft/kindeditor/blob/master/license.txt
/// ========================================================================
-
+@border-radius-base: 0;
// Kindeditor theme in ZUI style
/*! KindEditor Copyright (C) kindsoft.net, Licence: http://kindeditor.net/license.php */
-
/* common */
.ke-inline-block {
display: -moz-inline-stack;
@@ -233,38 +232,46 @@
/* statusbar */
.ke-statusbar {
position: absolute;
- width: 100%;
bottom: 0;
+ right: 0;
background-color: @input-bg;
+ border-left: 1px solid @input-border;
border-top: 1px solid @input-border;
+ width: 14px;
font-size: 0;
line-height: 0;
- *height: 12px;
+ height: 14px;
overflow: hidden;
text-align: center;
+ transition: opacity .2s;
cursor: s-resize;
.opacity(0);
- .ke-statusbar-center-icon,
- .ke-statusbar-right-icon {
- height: 11px;
- background-image: url(themes/default/default.png);
- }
- .ke-statusbar-center-icon {
- background-position: -0px -754px;
- width: 15px;
- }
+ .ke-statusbar-resize-icon {
+ position: relative;
- .ke-statusbar-right-icon {
- position: absolute;
- right: 0;
- bottom: 0;
- cursor: se-resize;
- background-position: -5px -741px;
- width: 11px;
+ &:before,
+ &:after {
+ left: -4px;
+ content: ' ';
+ display: block;
+ position: absolute;
+ top: 2px;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 4px 4px 4px;
+ border-color: transparent transparent @color-gray transparent;
+ }
+ &:after {
+ top: 7px;
+ border-width: 4px 4px 0 4px;
+ border-color: @color-gray transparent transparent transparent;
+ }
}
- &:hover {
+ &.ke-dragging,
+ .ke-container:hover & {
.opacity(1);
}
}
@@ -404,8 +411,6 @@
width: 100%;
height: 100%;
background-color: @modal-content-bg;
- border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
- border: 1px solid @modal-content-border-color;
border-radius: @border-radius-base;
overflow: hidden;
}
@@ -417,7 +422,7 @@
width: 100%;
height: 100%;
box-shadow: 0 3px 9px rgba(0,0,0,.5);
-
+ border-radius: @border-radius-base;
background-color: #F0F0EE;
}
.ke-dialog-header {
@@ -435,7 +440,7 @@
}
.ke-dialog-icon-close {
display: block;
- background: url(default.png) no-repeat scroll 0 -688px;
+ background: url(themes/default/default.png) no-repeat scroll 0 -688px;
width: 16px;
height: 16px;
position: absolute;
@@ -588,6 +593,8 @@
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
.form-control-focus();
+
+ &[disabled] {background: #eee}
}
.ke-input-number {
width: 50px;
@@ -732,7 +739,7 @@
}
.ke-swfupload-body .ke-delete {
display: block;
- background: url(default.png) no-repeat scroll 0 -688px;
+ background: url(themes/default/default.png) no-repeat scroll 0 -688px;
width: 16px;
height: 16px;
position: absolute;