`,
// 事件绑定
events: [
{
// 增加行
selector: '#' + addRowBtnId,
type: 'click',
fn: () => {
this._addRow()
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true
}
},
{
// 增加列
selector: '#' + addColBtnId,
type: 'click',
fn: () => {
this._addCol()
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true
}
},
{
// 删除行
selector: '#' + delRowBtnId,
type: 'click',
fn: () => {
this._delRow()
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true
}
},
{
// 删除列
selector: '#' + delColBtnId,
type: 'click',
fn: () => {
this._delCol()
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true
}
},
{
// 删除表格
selector: '#' + delTableBtnId,
type: 'click',
fn: () => {
this._delTable()
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
return true
}
}
]
}
]
})
// 显示 panel
panel.show()
},
// 获取选中的单元格的位置信息
_getLocationData: function () {
const result = {}
const editor = this.editor
const $selectionELem = editor.selection.getSelectionContainerElem()
if (!$selectionELem) {
return
}
const nodeName = $selectionELem.getNodeName()
if (nodeName !== 'TD' && nodeName !== 'TH') {
return
}
// 获取 td index
const $tr = $selectionELem.parent()
const $tds = $tr.children()
const tdLength = $tds.length
$tds.forEach((td, index) => {
if (td === $selectionELem[0]) {
// 记录并跳出循环
result.td = {
index: index,
elem: td,
length: tdLength
}
return false
}
})
// 获取 tr index
const $tbody = $tr.parent()
const $trs = $tbody.children()
const trLength = $trs.length
$trs.forEach((tr, index) => {
if (tr === $tr[0]) {
// 记录并跳出循环
result.tr = {
index: index,
elem: tr,
length: trLength
}
return false
}
})
// 返回结果
return result
},
// 增加行
_addRow: function () {
// 获取当前单元格的位置信息
const locationData = this._getLocationData()
if (!locationData) {
return
}
const trData = locationData.tr
const $currentTr = $(trData.elem)
const tdData = locationData.td
const tdLength = tdData.length
// 拼接即将插入的字符串
const newTr = document.createElement('tr')
let tpl = '', i
for (i = 0; i < tdLength; i++) {
tpl += '
| '
}
newTr.innerHTML = tpl
// 插入
$(newTr).insertAfter($currentTr)
},
// 增加列
_addCol: function () {
// 获取当前单元格的位置信息
const locationData = this._getLocationData()
if (!locationData) {
return
}
const trData = locationData.tr
const tdData = locationData.td
const tdIndex = tdData.index
const $currentTr = $(trData.elem)
const $trParent = $currentTr.parent()
const $trs = $trParent.children()
// 遍历所有行
$trs.forEach(tr => {
const $tr = $(tr)
const $tds = $tr.children()
const $currentTd = $tds.get(tdIndex)
const name = $currentTd.getNodeName().toLowerCase()
// new 一个 td，并插入
const newTd = document.createElement(name)
$(newTd).insertAfter($currentTd)
})
},
// 删除行
_delRow: function () {
// 获取当前单元格的位置信息
const locationData = this._getLocationData()
if (!locationData) {
return
}
const trData = locationData.tr
const $currentTr = $(trData.elem)
$currentTr.remove()
},
// 删除列
_delCol: function () {
// 获取当前单元格的位置信息
const locationData = this._getLocationData()
if (!locationData) {
return
}
const trData = locationData.tr
const tdData = locationData.td
const tdIndex = tdData.index
const $currentTr = $(trData.elem)
const $trParent = $currentTr.parent()
const $trs = $trParent.children()
// 遍历所有行
$trs.forEach(tr => {
const $tr = $(tr)
const $tds = $tr.children()
const $currentTd = $tds.get(tdIndex)
// 删除
$currentTd.remove()
})
},
// 删除表格
_delTable: function () {
const editor = this.editor
const $selectionELem = editor.selection.getSelectionContainerElem()
if (!$selectionELem) {
return
}
const $table = $selectionELem.parentUntil('table')
if (!$table) {
return
}
$table.remove()
},
// 试图改变 active 状态
tryChangeActive: function (e) {
const editor = this.editor
const $elem = this.$elem
const $selectionELem = editor.selection.getSelectionContainerElem()
if (!$selectionELem) {
return
}
const nodeName = $selectionELem.getNodeName()
if (nodeName === 'TD' || nodeName === 'TH') {
this._active = true
$elem.addClass('w-e-active')
} else {
this._active = false
$elem.removeClass('w-e-active')
}
}
}
export default Table