設(shè)置表格列寬—在富文本編輯器中的實(shí)現(xiàn)
大家好，我是前端西瓜哥。
之前因?yàn)楣ぷ魃系囊恍┰颍褂玫?wangEditor 富文本編輯器的表格(table)功能并不能滿足需求，創(chuàng)建的表格只是設(shè)置了 width: 100%，列的寬度的自適應(yīng)的效果非常不美觀。于是決定修改源碼，對(duì)表格功能做了加強(qiáng)，使其支持調(diào)整列寬。
為了方便讀者理解，最近把這部分邏輯單獨(dú)抽離出來(lái)并做了優(yōu)化，寫了個(gè)能獨(dú)立運(yùn)行的 demo，配合這篇文章簡(jiǎn)單說(shuō)一說(shuō)實(shí)現(xiàn)思路。
實(shí)現(xiàn)思路
1、 創(chuàng)建空表格
第一步是創(chuàng)建空表格。要想支持表格可以設(shè)置寬度，需要在 table 元素下使用 colgroup 元素。我們根據(jù)表格列的數(shù)量，在 colgroup 下創(chuàng)建同等數(shù)量的 col 元素并設(shè)置寬度，就能給對(duì)應(yīng)順序的列賦予寬度。效果可以查看這個(gè) 在線demo 。
此外，表格的單元格如果沒(méi)有內(nèi)容，是會(huì)發(fā)生高度塌陷的，且無(wú)法通過(guò) min-height 和 height 設(shè)置高度 。為解決這個(gè)問(wèn)題，我們通常會(huì)在創(chuàng)建空表格時(shí)，給單元格添加內(nèi)容。
2、 高亮線的顯現(xiàn)
第二步是實(shí)現(xiàn)光標(biāo)劃到列之間的分割線上方時(shí)，將高亮線顯現(xiàn)出來(lái)。實(shí)現(xiàn)方式是：
- 初始化時(shí)，在編輯器容器元素下創(chuàng)建一個(gè)絕對(duì)定位的 div 元素作為高亮線，并隱藏。
- 給編輯器容器元素綁定鼠標(biāo)移動(dòng)事件。當(dāng)光標(biāo)移動(dòng)到表格元素內(nèi)部時(shí)，遍歷 col 元素得到所有列分隔線的位置(最左邊的不需要)。若光標(biāo)位于這些分隔線附近，拿到左位移量，然后修改高亮線的位置并將其顯現(xiàn)出來(lái);否則隱藏高亮線。
3、 拖拽高亮線實(shí)現(xiàn)設(shè)置列寬
前面提到，當(dāng)光標(biāo)懸浮在列分割線上方附近，會(huì)出現(xiàn)高亮線。其實(shí)為實(shí)現(xiàn)修改列寬，我們還要記錄一些數(shù)據(jù)：(1)對(duì)應(yīng)的表格元素;(2)第幾列 rowIdx。當(dāng)然光標(biāo)移開時(shí)，要把這些數(shù)據(jù)清空。
下面是拖拽這一動(dòng)作的實(shí)現(xiàn)，涉及到鼠標(biāo)按下、鼠標(biāo)移動(dòng)、鼠標(biāo)釋放三個(gè)事件：
- 當(dāng)鼠標(biāo)在高亮線上 按下 時(shí)，我們要將上面的數(shù)據(jù)拷貝一份，然后再記錄好要修改的(3)列的寬度;(4)光標(biāo)左偏移量 left(后面要用來(lái)計(jì)算相對(duì)移動(dòng)位置)(5)對(duì)應(yīng)的 col 元素。
- 在鼠標(biāo)按下不釋放的情況下，移動(dòng)鼠標(biāo)，就代表著 拖拽 這一動(dòng)作的發(fā)生。此時(shí)，我們計(jì)算光標(biāo)的相對(duì)左移動(dòng)，給對(duì)應(yīng)的 col 元素設(shè)置寬度，就能實(shí)現(xiàn)動(dòng)圖上的效果。
- 鼠標(biāo)釋放，將這些數(shù)據(jù)重置為空。
因?yàn)橹恍枰玫酵献У南鄬?duì)位置，所以我們不是必須要將事件綁定到編輯器容器上。另外為了確保鼠標(biāo)釋放事件正在發(fā)生，最終我選擇在 document 元素上綁定事件。document 元素上綁定的鼠標(biāo)釋放事件，按下鼠標(biāo)后，即便在瀏覽器外面釋放鼠標(biāo)，也能觸發(fā)。
另外，為處理列寬過(guò)小，甚至計(jì)算出負(fù)值的情況，我們需要設(shè)置一個(gè)最小列寬。
代碼實(shí)現(xiàn)
那么這里就簡(jiǎn)單講解一下核心代碼。
首先是創(chuàng)建空表格：
const DEFAULT_COL_WIDTH = 80
const DEFAULT_COL_SIZE = 5
const DEFAULT_ROW_SIZE = 5
// 生成空 table
function createTable(row = DEFAULT_ROW_SIZE, col = DEFAULT_COL_SIZE, hasTh = false, colWidth = DEFAULT_COL_WIDTH) {
const tbody = document.createElement('tbody')
let tr, td
for (let i = 0; i < row; i++) {
tr = document.createElement('tr')
tbody.appendChild(tr)
for (let j = 0; j < col; j++) {
td = document.createElement((i === 0 && hasTh) ? 'th' : 'td')
td.innerHTML = '<br />' // 填充點(diǎn)東西，處理單元格高度塌陷問(wèn)題
tr.appendChild(td)
}
}
const colgroup = document.createElement('colgroup')
let colElm
for (let i = 0; i < col; i++) {
colElm = document.createElement('col')
colElm.style.width = colWidth + 'px'
colgroup.appendChild(colElm)
}
const table = document.createElement('table')
table.appendChild(colgroup)
table.appendChild(tbody)
return table
}
顯現(xiàn)高亮線的核心實(shí)現(xiàn)邏輯如下。計(jì)算左偏移量使用了 getBoundingClientRect() 方法和鼠標(biāo)事件中得到的 clientX 坐標(biāo)。其中還需要注意坐標(biāo)系有 “相對(duì)表格” 和 “相對(duì)編輯器容器” 兩種。
const hl = new HL(editorEl) // 高亮線對(duì)象
// ...
let lastState = {} // 高亮線出現(xiàn)時(shí)，記錄對(duì)應(yīng)的 tableEl 和 rowIdx
function handleMovemove(event) {
// 找到最近的table父元素
const nearestTable = getNearestTable(event.target, editorEl)
if (!nearestTable) {
hl.hideHL()
lastState = {}
return
}
const tableLeftByViewport = nearestTable.getBoundingClientRect().left
const cursorLeftByTable = event.clientX - tableLeftByViewport
const tableLeftByEditor = tableLeftByViewport - editorEl.getBoundingClientRect().left
//accurateLeft 為精準(zhǔn)的列分割線上的左偏移量
const { idx: rowIdx, left: accurateLeft } = getNearestRowBorder(nearestTable, cursorLeftByTable)
if (rowIdx !== -1) {
hl.drawHL(nearestTable, tableLeftByEditor + accurateLeft) // 轉(zhuǎn)換為相對(duì) editor 容器的左偏移量
lastState = { tableEl: nearestTable, rowIdx } // 保存 table 元素和 列索引，鼠標(biāo)按下時(shí)要用到。
editorEl.style.cursor = 'col-resize'
} else {
hl.hideHL()
lastState = {}
}
}
然后是拖拽的邏輯。dragState.tableEl 除了記錄保存當(dāng)前表格元素，還在 moveover 事件中做是否觸發(fā)拖拽的標(biāo)識(shí)。
// 拖拽過(guò)程中保存的變量
const emptyDragState = {
tableEl: undefined,
rowIdx: undefined,
col: null,
width: undefined,
left: undefined,
}
let dragState = {...emptyDragState}
function dragMouseDown(event) {
// TODO: 需要點(diǎn)左鍵才執(zhí)行
const { tableEl, rowIdx } = lastState
if (!tableEl) return
const col = getCol(tableEl, rowIdx)
const width = parseFloat(col.style.width)
const left = event.clientX
dragState = { ...dragState, ...lastState, col, width, left }
}
function dragMouseover(event) {
const { left, tableEl, width, rowIdx } = dragState
if (!tableEl) return
const offset = event.clientX - left
setColWidth(tableEl, rowIdx, width + offset)
}
function dragMouseup() {
dragState = {...emptyDragState}
}
結(jié)尾
俗話說(shuō)的好，“Talk is cheap, show me your code!”。如果你對(duì)里面的實(shí)現(xiàn)細(xì)節(jié)感興趣的話，請(qǐng)去我的在線 demo 閱讀源碼和測(cè)試：
