diff --git a/_examples/completeDemo.html b/_examples/completeDemo.html index fb2857acf..39bb522ac 100755 --- a/_examples/completeDemo.html +++ b/_examples/completeDemo.html @@ -67,6 +67,12 @@ ue.addListener('ready',function(){ this.focus() }); + ue.addListener("showDragPopup",function(type,table){ +// console.log("over"); + }); + ue.addListener("hideDragPopup",function(type,table){ +// console.log("out"); + }); function createEditor(){ enableBtn(); UE.getEditor('editor') diff --git a/_src/plugins/table.js b/_src/plugins/table.js index 4bc13f901..808126c34 100644 --- a/_src/plugins/table.js +++ b/_src/plugins/table.js @@ -34,8 +34,9 @@ UE.plugins['table'] = function () { 'defaultRows':5, 'tdvalign':'top', 'cursorpath':me.options.UEDITOR_HOME_URL + "themes/default/images/cursor_", - 'tableDragable':false + 'tableDragable':true }); + me.getUETable = getUETable; var commands = { 'deletetable':1, 'inserttable':1, @@ -61,7 +62,8 @@ UE.plugins['table'] = function () { "adaptbycustomer":1, "insertparagraph":1, "averagedistributecol":1, - "averagedistributerow":1 + "averagedistributerow":1, + "fixedwidth":1 }; me.ready(function () { utils.cssRule('table', @@ -69,10 +71,10 @@ UE.plugins['table'] = function () { '.selectTdClass{background-color:#edf5fa !important}' + 'table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}' + //插入的表格的默认样式 - 'table{line-height:22px; margin-bottom:10px;border-collapse:collapse;display:table;}' + - 'td,th{ background:white; padding: 0 10px;border: 1px solid #DDD;line-height: 22px;}' + - 'caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' + - 'th{border-top:2px solid #BBB;background:#F7F7F7;}' + + 'table{ line-height:22px; margin-bottom:10px;border-collapse:collapse;display:table;}' + + 'td,th{ background:white; padding: 0 10px;line-height: 22px;}' + + 'caption{ border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' + + 'th{ border-top:2px solid #BBB;background:#F7F7F7;}' + 'td p{margin:0;padding:0;}', me.document); var tableCopyList, isFullCol, isFullRow; @@ -207,7 +209,7 @@ UE.plugins['table'] = function () { } cell.innerHTML = cj.innerHTML; cj.getAttribute('width') && cell.setAttribute('width', cj.getAttribute('width')); - cj.getAttribute('valign') && cell.setAttribute('valign', cj.getAttribute('valign')); + cj.getAttribute('vAlign') && cell.setAttribute('vAlign', cj.getAttribute('vAlign')); cj.getAttribute('align') && cell.setAttribute('align', cj.getAttribute('align')); cj.style.cssText && (cell.style.cssText = cj.style.cssText) } @@ -216,7 +218,7 @@ UE.plugins['table'] = function () { break; cj.innerHTML = ci[j].innerHTML; ci[j].getAttribute('width') && cj.setAttribute('width', ci[j].getAttribute('width')); - ci[j].getAttribute('valign') && cj.setAttribute('valign', ci[j].getAttribute('valign')); + ci[j].getAttribute('vAlign') && cj.setAttribute('vAlign', ci[j].getAttribute('vAlign')); ci[j].getAttribute('align') && cj.setAttribute('align', ci[j].getAttribute('align')); ci[j].style.cssText && (cj.style.cssText = ci[j].style.cssText) } @@ -245,7 +247,7 @@ UE.plugins['table'] = function () { td.innerHTML = cj.innerHTML; //todo 定制处理 cj.getAttribute('width') && td.setAttribute('width', cj.getAttribute('width')); - cj.getAttribute('valign') && td.setAttribute('valign', cj.getAttribute('valign')); + cj.getAttribute('vAlign') && td.setAttribute('vAlign', cj.getAttribute('vAlign')); cj.getAttribute('align') && td.setAttribute('align', cj.getAttribute('align')); cj.style.cssText && (td.style.cssText = cj.style.cssText); preNode = td; @@ -313,7 +315,6 @@ UE.plugins['table'] = function () { domUtils.fillNode(me.document, td); } removeStyleSize(td, true); -// domUtils.removeAttributes(td, ['style']) }); }); } @@ -382,10 +383,23 @@ UE.plugins['table'] = function () { } } }); - table.onmousemove = function () { - me.options.tableDragable && toggleDragButton(true, this, me); + var overFlag = false; + table.onmouseover = function () { + if (!overFlag) { + overFlag = true; + me.options.tableDragable && me.fireEvent("showDragPopup",table); + } }; - table.onmouseout = function () { + table.onmouseout = function (evt) { + evt = evt || me.window.event; + var mousePos = mouseCoords(evt), + x = mousePos.x, + y = mousePos.y, + p = domUtils.getXY(table); + if (x <= p.x || x >= (p.x + table.offsetWidth) || y <= p.y || y >= (p.y + table.offsetHeight)) { + me.options.tableDragable && me.fireEvent("hideDragPopup",table); + overFlag = false; + } toggleDragableState(me, false, "", null); hideDragLine(me); }; @@ -463,7 +477,23 @@ UE.plugins['table'] = function () { } } } - h == 'h' && me.execCommand('adaptbytext'); + if(h == 'h') { + var ut = getUETable(target), + cells = ut.getSameEndPosCells(target,"x"), + table = ut.table; + table.removeAttribute("width"); + utils.each(cells,function(cell){ + cell.removeAttribute("width"); + }); + setTimeout(function(){ + var width = cells[0].offsetWidth -20; + utils.each(cells,function(cell){ + cell.setAttribute("width",width); + }); + table.setAttribute("width",table.offsetWidth) + }) + + } } } } @@ -593,7 +623,7 @@ UE.plugins['table'] = function () { if (isEmptyBlock(td)) { range.setStart(td, 0).setCursor(false, true) } else { - range.selectNodeContents(td).select(); + range.selectNodeContents(td).select(true); } state = me.queryCommandState(cmd); value = me.queryCommandValue(cmd); @@ -719,75 +749,12 @@ UE.plugins['table'] = function () { //位于第一行的顶部或者第一列的左边时不可拖动 toggleDragableState(me, target ? !!state : false, target ? state : '', pos, target); } -// toggleDragButton(inTable(pos,table),table); - } else { - toggleDragButton(false, table, me); } } catch (e) { showError(e); } } - var dragButtomTimer; - - function toggleDragButton(show, table, editor) { - if (!show) { - if (dragOver)return; - dragButtomTimer = setTimeout(function () { - !dragOver && dragButton && dragButton.parentNode && dragButton.parentNode.removeChild(dragButton); - }, 2000); - } else { - createDragButton(table, editor); - } - } - - function createDragButton(table, editor) { - var pos = domUtils.getXY(table), - doc = table.ownerDocument; - if (dragButton && dragButton.parentNode)return dragButton; - dragButton = doc.createElement("div"); - dragButton.contentEditable = false; - dragButton.innerHTML = ""; - dragButton.style.cssText = "width:15px;height:15px;background-image:url(" + editor.options.UEDITOR_HOME_URL + "dialogs/table/dragicon.png);position: absolute;cursor:move;top:" + (pos.y - 15) + "px;left:" + (pos.x) + "px;"; - domUtils.unSelectable(dragButton); - dragButton.onmouseover = function (evt) { - dragOver = true; - }; - dragButton.onmouseout = function (evt) { - dragOver = false; - }; - domUtils.on(dragButton, 'click', function (type, evt) { - doClick(evt, this); - }); - domUtils.on(dragButton, 'dblclick', function (type, evt) { - doDblClick(evt); - }); - domUtils.on(dragButton, 'dragstart', function (type, evt) { - domUtils.preventDefault(evt); - }); - var timer; - - function doClick(evt, button) { - // 部分浏览器下需要清理 - clearTimeout(timer); - timer = setTimeout(function () { - editor.fireEvent("tableClicked", table, button); - }, 300); - } - - function doDblClick(evt) { - clearTimeout(timer); - var ut = getUETable(table), - start = table.rows[0].cells[0], - end = ut.getLastCell(), - range = ut.getCellsRange(start, end); - editor.selection.getRange().setStart(start, 0).setCursor(false, true); - ut.setSelected(range); - } - - doc.body.appendChild(dragButton); - } - // function inPosition(table, pos) { // var tablePos = domUtils.getXY(table), @@ -1041,10 +1008,10 @@ UE.plugins['table'] = function () { start = domUtils.findParentByTagName(range.startContainer, ['td', 'th', 'caption'], true); end = domUtils.findParentByTagName(range.endContainer, ['td', 'th', 'caption'], true); if (start !== end) { - me.selection.clearRange() + me.selection && me.selection.clearRange() } } else { - me.selection.clearRange() + me.selection && me.selection.clearRange() } } mousedown = false; @@ -1235,7 +1202,7 @@ UE.plugins['table'] = function () { UE.commands['inserttable'] = { queryCommandState:function () { - return getTableItemsByRange(this).table ? -1 : 0; + return 0; }, execCommand:function (cmd, opt) { function createTable(opt, tableWidth, tdWidth) { @@ -1245,23 +1212,28 @@ UE.plugins['table'] = function () { for (var r = 0; r < rowsNum; r++) { html.push(''); for (var c = 0; c < colsNum; c++) { - html.push('' + (browser.ie ? domUtils.fillChar : '
') + '') + html.push('' + (browser.ie ? domUtils.fillChar : '
') + '') } html.push('') } - return '' + html.join('') + '
' + return '' + html.join('') + '
' } if (!opt) { opt = utils.extend({}, { numCols:this.options.defaultCols, numRows:this.options.defaultRows, - tdvalign:this.options.tdvalign + 9898:this.options.tdvalign }) } + var range = this.selection.getRange(), + start = range.startContainer, + firstParentBlock = domUtils.findParent(start,function(node){ + return domUtils.isBlockElm(node); + },true); var me = this, defaultValue = getDefaultValue(me), - tableWidth = getTableWidth(me, needIEHack, defaultValue), + tableWidth = getTableWidth(me, needIEHack, defaultValue) - (firstParentBlock ? parseInt(domUtils.getXY(firstParentBlock).x,10):0), tdWidth = Math.floor(tableWidth / opt.numCols - defaultValue.tdPadding * 2 - defaultValue.tdBorder); //todo其他属性 !opt.tdvalign && (opt.tdvalign = me.options.tdvalign); @@ -1283,6 +1255,20 @@ UE.plugins['table'] = function () { } } }; + UE.commands['insertparagraphaftertable'] = { + queryCommandState:function () { + return getTableItemsByRange(this).cell ? 0 : -1; + }, + execCommand:function () { + var table = getTableItemsByRange(this).table; + if (table) { + var p = this.document.createElement("p"); + p.innerHTML = browser.ie ? ' ' : '
'; + domUtils.insertAfter(table,p); + this.selection.getRange().setStart(p, 0).setCursor(); + } + } + }; UE.commands['deletetable'] = { queryCommandState:function () { @@ -1325,19 +1311,31 @@ UE.plugins['table'] = function () { ci.setAttribute('align', align); } } + }, + queryCommandValue:function(cmd){ + var selectedTds = getSelectedArr(this); + if(selectedTds.length){ + return selectedTds[0].getAttribute('align'); + } } }; UE.commands['cellvalign'] = { queryCommandState:function () { return getSelectedArr(this).length ? 0 : -1; }, - execCommand:function (cmd, valign) { + execCommand:function (cmd, vAlign) { var selectedTds = getSelectedArr(this); if (selectedTds.length) { for (var i = 0, ci; ci = selectedTds[i++];) { - ci.setAttribute('vAlign', valign); + ci.setAttribute('vAlign', vAlign); } } + }, + queryCommandValue:function(cmd){ + var selectedTds = getSelectedArr(this); + if(selectedTds.length){ + return selectedTds[0].getAttribute('vAlign'); + } } }; UE.commands['insertcaption'] = { @@ -1773,29 +1771,13 @@ UE.plugins['table'] = function () { cell = tableItems.cell; if (table) { if (cmd == 'adaptbywindow') { - var tds = table.getElementsByTagName("td"); - utils.each(tds, function (td) { - td.removeAttribute("width"); - }); - table.setAttribute('width', '100%'); + resetTdWidth(table); } else { - var ut = getUETable(table), - preTds = cell?ut.getSameEndPosCells(cell, "x"):table.getElementsByTagName("td"); - if (preTds.length) { - table.style.width = ""; - table.removeAttribute("width"); - utils.each(preTds, function (td) { - td.removeAttribute("width"); - }); - - var defaultValue = getDefaultValue(me, table); - var width = table.offsetWidth, - bodyWidth = me.body.offsetWidth; - if (width > bodyWidth) { - table.setAttribute('width', getTableWidth(me, needIEHack, defaultValue)); - } - - } + var cells = domUtils.getElementsByTagName(table,"td th"); + utils.each(cells,function(cell){ + cell.removeAttribute("width"); + }); + table.removeAttribute("width"); } } } @@ -1806,7 +1788,7 @@ UE.plugins['table'] = function () { queryCommandState:function () { var ut = getUETableBySelected(this); if (!ut) return -1; - return ut.isFullRow() || ut.isFullCol() ? 0 : -1; + return ut.isFullCol()&&ut.cellsRange.beginColIndex!=ut.cellsRange.endColIndex? 0 : -1; }, execCommand:function (cmd) { var me = this, @@ -1859,7 +1841,7 @@ UE.plugins['table'] = function () { var ut = getUETableBySelected(this); if (!ut) return -1; if (ut.selectedTds && /th/ig.test(ut.selectedTds[0].tagName)) return -1; - return ut.isFullRow() || ut.isFullCol() ? 0 : -1; + return ut.isFullRow()&&ut.cellsRange.beginRowIndex!=ut.cellsRange.endRowIndex? 0 : -1; }, execCommand:function (cmd) { var me = this, @@ -1868,7 +1850,8 @@ UE.plugins['table'] = function () { function getAverageHeight() { var averageHeight, rowNum, sumHeight = 0, tb = ut.table, - tbAttr = getDefaultValue(me, tb); + tbAttr = getDefaultValue(me, tb), + tdpadding = parseInt(domUtils.getComputedStyle(tb.getElementsByTagName('td')[0], "padding-top")); if (ut.isFullCol()) { var captionArr = domUtils.getElementsByTagName(tb, "caption"), @@ -1899,7 +1882,7 @@ UE.plugins['table'] = function () { if (browser.ie && browser.version < 9) { averageHeight = Math.ceil(sumHeight / rowNum); } else { - averageHeight = Math.ceil(sumHeight / rowNum) - tbAttr.tdBorder * 2; + averageHeight = Math.ceil(sumHeight / rowNum) - tbAttr.tdBorder * 2-tdpadding*2; } return averageHeight; } @@ -1943,6 +1926,15 @@ UE.plugins['table'] = function () { domUtils.setAttributes(cell, data); }); } + }, + queryCommandValue:function(cmd){ + var selectedTds = getSelectedArr(this); + if(selectedTds.length){ + return { + vAlign:selectedTds[0].getAttribute('vAlign'), + align:selectedTds[0].getAttribute('align') + } + } } }; //表格对齐方式 @@ -1971,17 +1963,22 @@ UE.plugins['table'] = function () { queryCommandState:function () { return getTableItemsByRange(this).table ? 0 : -1 }, - execCommand:function (cmd, color) { + execCommand:function (cmd, opt) { var rng = this.selection.getRange(), table = domUtils.findParentByTagName(rng.startContainer, 'table'); + if (table) { var arr = domUtils.getElementsByTagName(table, "td").concat( domUtils.getElementsByTagName(table, "th"), domUtils.getElementsByTagName(table, "caption") ); - utils.each(arr, function (node) { - node.style.borderColor = color; + + domUtils.setAttributes(table,{ + border:opt.width, + borderColor:opt.color||"#ddd" }); + if(opt["style"]) table.style.borderStyle = opt["style"]; + } } }; @@ -2007,6 +2004,39 @@ UE.plugins['table'] = function () { } } }; + UE.commands['fixedwidth'] = { + queryCommandState:function(){ + return 0; + }, + execCommand:function(cmd){ + var rng = this.selection.getRange(), + table = domUtils.findParentByTagName(rng.startContainer, 'table'), + cells = domUtils.getElementsByTagName(table,"td th"); + + var tmpWidth =[]; + utils.each(cells,function(cell){ + if(cell.colSpan==1 && !cell.getAttribute("width") ) tmpWidth.push(cell.offsetWidth-20); + }); + utils.each(cells,function(cell){ + var width = tmpWidth.shift(); + if(cell.colSpan==1 && !cell.getAttribute("width") ) cell.setAttribute("width",(width < 22 ? 0: width)); + }) + table.setAttribute("width",table.offsetWidth); + } + + }; + function resetTdWidth(table){ + var tds = table.getElementsByTagName("td"); + utils.each(tds, function (td) { + td.removeAttribute("width"); + }); + table.setAttribute('width', getTableWidth(me,needIEHack,getDefaultValue(me,table))); + setTimeout(function(){ + utils.each(tds,function(td){ + (td.colSpan ==1) && td.setAttribute("width",td.offsetWidth+""); + }) + },0) + } /** * UE表格操作类 @@ -2587,7 +2617,7 @@ UE.plugins['table'] = function () { for (var colIndex = 0; colIndex < numCols; colIndex++) { cell = this.cloneCell(sourceCell,true); this.setCellContent(cell); - cell.setAttribute('valign', cell.getAttribute('valign')); + cell.setAttribute('vAlign', cell.getAttribute('vAlign')); row.appendChild(cell); } } else { @@ -2675,7 +2705,8 @@ UE.plugins['table'] = function () { var rowsNum = this.rowsNum, rowIndex = 0, tableRow, cell, - backWidth = parseInt((this.table.offsetWidth - (this.colsNum + 1) * 20 - (this.colsNum + 1)) / (this.colsNum + 1), 10); + overflow = (this.table.offsetWidth + sourceCell.offsetWidth) > this.table.ownerDocument.body.offsetWidth, + backWidth = overflow ? parseInt((this.table.offsetWidth - (this.colsNum + 1) * 20) / (this.colsNum + 1), 10):(sourceCell.offsetWidth-22); function replaceTdToTh(rowIndex, cell, tableRow) { if (rowIndex == 0) { @@ -2696,7 +2727,7 @@ UE.plugins['table'] = function () { preCell = tableRow.cells[colIndex == 0 ? colIndex : tableRow.cells.length]; cell = this.cloneCell(sourceCell,true); //tableRow.insertCell(colIndex == 0 ? colIndex : tableRow.cells.length); this.setCellContent(cell); - cell.setAttribute('valign', cell.getAttribute('valign')); + cell.setAttribute('vAlign', cell.getAttribute('vAlign')); preCell && cell.setAttribute('width', preCell.getAttribute('width')); if (!colIndex) { tableRow.insertBefore(cell, tableRow.cells[0]); @@ -2717,27 +2748,29 @@ UE.plugins['table'] = function () { cell = this.cloneCell(sourceCell,true);//tableRow.insertCell(cellInfo.cellIndex); this.setCellContent(cell); - cell.setAttribute('valign', cell.getAttribute('valign')); + cell.setAttribute('vAlign', cell.getAttribute('vAlign')); preCell && cell.setAttribute('width', preCell.getAttribute('width')) tableRow.insertBefore(cell, preCell); } replaceTdToTh(rowIndex, cell, tableRow); } } + //框选时插入不触发contentchange，需要手动更新索引 this.update(); - this.updateWidth(backWidth,defaultValue||{tdPadding:10,tdBorder:1}); + this.updateWidth(backWidth); }, - updateWidth:function (width,defaultValue) { + updateWidth:function (width) { + this.table.setAttribute("width",""); var table = this.table, - tmpWidth = getWidth(table) - defaultValue.tdPadding * 2 - defaultValue.tdBorder + width; + tmpWidth = getWidth(table); if( tmpWidth1 && rowsNum % rowSpan!==0 && rowSpan%rowsNum!==0 ) return false; + var cols = this.getSameStartPosXCells(cell); + + }, getPreviewMergedCellsNum:function (rowIndex, colIndex) { var indexRow = this.indexTable[rowIndex], num = 0; @@ -2828,7 +2869,7 @@ UE.plugins['table'] = function () { tmpCell = tableRow.insertCell(this.indexTable[rowIndex][j].cellIndex + 1); tmpCell.rowSpan = cellInfo.rowSpan; this.setCellContent(tmpCell); - tmpCell.setAttribute('valign',cell.getAttribute('valign')); + tmpCell.setAttribute('vAlign',cell.getAttribute('vAlign')); tmpCell.setAttribute('align',cell.getAttribute('align')); tmpCell.setAttribute('width',backWidth); if (cell.style.cssText) { @@ -2838,7 +2879,7 @@ UE.plugins['table'] = function () { if (cell.tagName == 'TH') { var th = cell.ownerDocument.createElement('th'); th.appendChild(tmpCell.firstChild); - th.setAttribute('valign', cell.getAttribute('valign')); + th.setAttribute('vAlign', cell.getAttribute('vAlign')); th.rowSpan = tmpCell.rowSpan; tableRow.insertBefore(th, tmpCell); domUtils.remove(tmpCell) diff --git a/dialogs/table/edittable.html b/dialogs/table/edittable.html index f9545d6ae..ac7ad901b 100644 --- a/dialogs/table/edittable.html +++ b/dialogs/table/edittable.html @@ -39,6 +39,15 @@

+
  • + 宽度 + +
    • +
  • + 样式 + +
    • +
    @@ -50,6 +59,7 @@

    +
    diff --git a/dialogs/table/edittable.js b/dialogs/table/edittable.js index 05c30e583..1a8ab7a95 100644 --- a/dialogs/table/edittable.js +++ b/dialogs/table/edittable.js @@ -179,7 +179,7 @@ } else { editor.queryCommandState("deletecaption") != -1 && editor.execCommand("deletecaption"); } - editor.execCommand("edittable", tone.value); + editor.execCommand("edittable", {color:tone.value,width:$G("J_width").value,"style":$G("J_style").value}); autoSizeContent.checked ? adaptByTextTable() : ""; autoSizePage.checked ? editor.execCommand("adaptbywindow") : "";