vue-editify 0.1.42 → 0.1.44

package/src/components/toolbar/toolbar.vue

@@ -99,6 +99,22 @@
 				<Button @operate="deleteTableColumn" rightBorder name="deleteColumn" :title="$editTrans('deleteColumn')" :tooltip="config.tooltip" :color="color">
 					<Icon value="delete-column"></Icon>
 				</Button>
+				<!-- 向左合并单元格 -->
+				<Button :disabled="!canMergeCells('left')" @operate="mergeCells('left')" rightBorder name="mergeCellsLeft" :title="$editTrans('mergeCellsLeft')" :tooltip="config.tooltip" :color="color">
+					<Icon value="merge-cells-left"></Icon>
+				</Button>
+				<!-- 向右合并单元格 -->
+				<Button :disabled="!canMergeCells('right')" @operate="mergeCells('right')" rightBorder name="mergeCellsRight" :title="$editTrans('mergeCellsRight')" :tooltip="config.tooltip" :color="color">
+					<Icon value="merge-cells-right"></Icon>
+				</Button>
+				<!-- 向上合并单元格 -->
+				<Button :disabled="!canMergeCells('up')" @operate="mergeCells('up')" rightBorder name="mergeCellsUp" :title="$editTrans('mergeCellsUp')" :tooltip="config.tooltip" :color="color">
+					<Icon value="merge-cells-up"></Icon>
+				</Button>
+				<!-- 向下合并单元格 -->
+				<Button :disabled="!canMergeCells('down')" @operate="mergeCells('down')" rightBorder name="mergeCellsDown" :title="$editTrans('mergeCellsDown')" :tooltip="config.tooltip" :color="color">
+					<Icon value="merge-cells-down"></Icon>
+				</Button>
 				<!-- 删除表格 -->
 				<Button @operate="deleteElement('table')" leftBorder name="deleteTable" :title="$editTrans('deleteTable')" :tooltip="config.tooltip" :color="color">
 					<Icon value="delete-table"></Icon>
@@ -201,7 +217,7 @@ import Checkbox from '../checkbox/checkbox.vue'
 import Colors from '../colors/colors.vue'
 import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
 import { common as DapCommon } from 'dap-util'
-import { getMatchElementsByRange, removeTextStyle, removeTextMark, setTextStyle, setLineHeight, setTextMark, setList, setTask, setHeading, setAlign, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark } from '../../core/function'
+import { getCellSpanNumber, getTableSize, getMatchElementsByRange, removeTextStyle, removeTextMark, setTextStyle, setLineHeight, setTextMark, setList, setTask, setHeading, setAlign, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark, getMatchElementByElement, getCellMergeElement, setTableCellMerged } from '../../core/function'
 import { ToolbarProps } from './props'
 import { Ref, computed, inject, ref } from 'vue'
 import { ObjectType } from '../../core/tool'
@@ -453,6 +469,159 @@ const show = computed<boolean>({
 		emits('update:modelValue', val)
 	}
 })
+//是否可以合并单元格
+const canMergeCells = computed<(type: 'left' | 'right' | 'up' | 'down') => boolean>(() => {
+	return (type: 'left' | 'right' | 'up' | 'down') => {
+		if (!editor.value.range) {
+			return false
+		}
+		//光标所在单元格
+		const cell = getMatchElementByElement(editor.value.range.focus.element, {
+			parsedom: 'td'
+		})
+		//如果光标不在单元格内
+		if (!cell) {
+			return false
+		}
+		//判断是否可以向左合并
+		if (type == 'left') {
+			//是否可以向左合并
+			let flag = false
+			//当前单元格的rowspan
+			const cellSpanNum = getCellSpanNumber(cell)
+			//获取左侧单元格
+			const previousColumn = editor.value.getPreviousElement(cell)
+			//如果左侧单元格存在
+			if (previousColumn) {
+				//左侧单元格是隐藏的单元格
+				if (previousColumn.hasMarks() && previousColumn.marks!['data-editify-merged']) {
+					//获取合并该隐藏单元格的那个单元格
+					const { crossColumnElement } = getCellMergeElement(editor.value, previousColumn)
+					//如果是被跨列合并则判断跨列单元格占据的行数与当前单元格的行数是否一致
+					if (crossColumnElement) {
+						const { rowspan } = getCellSpanNumber(crossColumnElement)
+						flag = rowspan == cellSpanNum.rowspan
+					}
+				}
+				//左侧单元格不是隐藏的单元格
+				else {
+					//判断所占行数是否一致
+					const { rowspan } = getCellSpanNumber(previousColumn)
+					flag = rowspan == cellSpanNum.rowspan
+				}
+			}
+			return flag
+		}
+		//判断是否可以向右合并
+		if (type == 'right') {
+			//是否可以向右合并
+			let flag = false
+			//当前单元格的rowspan
+			const cellSpanNum = getCellSpanNumber(cell)
+			//获取右侧的单元格
+			let nextColumn = editor.value.getNextElement(cell)
+			//如果右侧单元格存在
+			while (nextColumn) {
+				//右侧单元格是隐藏的单元格
+				if (nextColumn.hasMarks() && nextColumn.marks!['data-editify-merged']) {
+					//获取合并该隐藏单元格的那个单元格
+					const { crossColumnElement } = getCellMergeElement(editor.value, nextColumn)
+					//如果是被跨列合并的表示属于当前单元格内，继续向右查询
+					if (crossColumnElement) {
+						nextColumn = editor.value.getNextElement(nextColumn)
+					}
+					//被跨行合并的直接结束，不能向右合并
+					else {
+						break
+					}
+				}
+				//右侧单元格不是隐藏的
+				else {
+					//判断行数是否与当前单元格一致
+					const { rowspan } = getCellSpanNumber(nextColumn)
+					//如果一致则可以合并
+					flag = rowspan == cellSpanNum.rowspan
+					//不管是否一致都直接结束
+					break
+				}
+			}
+			return flag
+		}
+		//判断是否可以向上合并
+		if (type == 'up') {
+			//是否可以向上合并
+			let flag = false
+			//当前单元格的colspan
+			const cellSpanNum = getCellSpanNumber(cell)
+			//获取单元格在行中的序列
+			const index = cell.parent!.children!.findIndex(item => item.isEqual(cell))
+			//获取上一行
+			const previousRow = editor.value.getPreviousElement(cell.parent!)
+			//如果上一行存在
+			if (previousRow) {
+				//获取上一行中对应序列的单元格
+				const column = previousRow.children![index]
+				//单元格是隐藏的单元格
+				if (column.hasMarks() && column.marks!['data-editify-merged']) {
+					//获取合并该隐藏单元格的那个单元格
+					const { crossRowElement } = getCellMergeElement(editor.value, column)
+					//如果是被跨行合并则判断跨列单元格占据的列数与当前单元格的列数是否一致
+					if (crossRowElement) {
+						const { colspan } = getCellSpanNumber(crossRowElement)
+						flag = colspan == cellSpanNum.colspan
+					}
+				}
+				//单元格不是隐藏的单元格
+				else {
+					//判断所占列数是否一致
+					const { colspan } = getCellSpanNumber(column)
+					flag = colspan == cellSpanNum.colspan
+				}
+			}
+			return flag
+		}
+		//判断是否可以向下合并
+		if (type == 'down') {
+			//是否可以向下合并
+			let flag = false
+			//当前单元格的colspan
+			const cellSpanNum = getCellSpanNumber(cell)
+			//获取单元格在行中的序列
+			const index = cell.parent!.children!.findIndex(item => item.isEqual(cell))
+			//获取下一行
+			let nextRow = editor.value.getNextElement(cell.parent!)
+			//如果下一行存在
+			while (nextRow) {
+				//获取下一行中对应序列的单元格
+				const column = nextRow.children![index]
+				//单元格是隐藏的单元格
+				if (column.hasMarks() && column.marks!['data-editify-merged']) {
+					//获取合并该隐藏单元格的那个单元格
+					const { crossRowElement } = getCellMergeElement(editor.value, column)
+					//如果是被跨行合并的表示属于当前单元格内，继续向下查询
+					if (crossRowElement) {
+						nextRow = editor.value.getNextElement(nextRow)
+					}
+					//被跨列合并的直接结束，不能向右合并
+					else {
+						break
+					}
+				}
+				//单元格不是隐藏的
+				else {
+					//判断列数是否与当前单元格一致
+					const { colspan } = getCellSpanNumber(column)
+					//如果一致则可以合并
+					flag = colspan == cellSpanNum.colspan
+					//不管是否一致都直接结束
+					break
+				}
+			}
+			return flag
+		}
+		return false
+	}
+})
 
 //输入框获取焦点
 const handleInputFocus = (e: Event) => {
@@ -744,27 +913,28 @@ const insertTableColumn = (type: string | undefined = 'left') => {
 		editor.value.range!.anchor.element = editor.value.range!.focus.element
 		editor.value.range!.anchor.offset = editor.value.range!.focus.offset
 	}
-	const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'table' })
 	const columns = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'td' })
-	const tbodys = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'tbody' })
-	if (tables.length == 1 && tbodys.length == 1 && columns.length == 1) {
-		const rows = tbodys[0].children
-		const index = columns[0].parent!.children!.findIndex(item => {
+	if (columns.length == 1) {
+		const row = columns[0].parent!
+		const tbody = row.parent!
+		const table = tbody.parent!
+		const rows = tbody.children
+		const index = row.children!.findIndex(item => {
 			return item.isEqual(columns[0])
 		})
 		//插入列
-		rows!.forEach(row => {
-			const newColumn = columns[0].clone(false)
+		rows!.forEach(item => {
+			const newColumn = new AlexElement('inblock', 'td', null, null, null)
 			const breakEl = new AlexElement('closed', 'br', null, null, null)
 			editor.value.addElementTo(breakEl, newColumn)
 			if (type == 'left') {
-				editor.value.addElementTo(newColumn, row, index)
+				editor.value.addElementTo(newColumn, item, index)
 			} else {
-				editor.value.addElementTo(newColumn, row, index + 1)
+				editor.value.addElementTo(newColumn, item, index + 1)
 			}
 		})
 		//插入col
-		const colgroup = tables[0].children!.find(item => {
+		const colgroup = table.children!.find(item => {
 			return item.parsedom == 'colgroup'
 		})!
 		const col = new AlexElement('closed', 'col', null, null, null)
@@ -773,8 +943,6 @@ const insertTableColumn = (type: string | undefined = 'left') => {
 		} else {
 			editor.value.addElementTo(col, colgroup, index + 1)
 		}
-		//渲染
-		editor.value.formatElementStack()
 		if (type == 'left') {
 			const previousColumn = editor.value.getPreviousElement(columns[0])!
 			editor.value.range!.anchor.moveToStart(previousColumn)
@@ -784,6 +952,8 @@ const insertTableColumn = (type: string | undefined = 'left') => {
 			editor.value.range!.anchor.moveToStart(nextColumn)
 			editor.value.range!.focus.moveToStart(nextColumn)
 		}
+		//渲染
+		editor.value.formatElementStack()
 		editor.value.domRender()
 		editor.value.rangeRender()
 	}
@@ -794,23 +964,27 @@ const insertTableRow = (type: string | undefined = 'up') => {
 		editor.value.range!.anchor.element = editor.value.range!.focus.element
 		editor.value.range!.anchor.offset = editor.value.range!.focus.offset
 	}
-	const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'table' })
 	const rows = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'tr' })
-	if (tables.length == 1 && rows.length == 1) {
-		const newRow = rows[0].clone()
-		newRow.children!.forEach(column => {
-			column.children = []
+	if (rows.length == 1) {
+		const tbody = rows[0].parent!
+		const { columnNumber } = getTableSize(tbody.children!)
+		const newRow = new AlexElement('inblock', 'tr', null, null, null)
+		for (let i = 0; i < columnNumber; i++) {
+			const column = new AlexElement('inblock', 'td', null, null, null)
 			const breakEl = new AlexElement('closed', 'br', null, null, null)
 			editor.value.addElementTo(breakEl, column)
-		})
+			editor.value.addElementTo(column, newRow)
+		}
 		if (type == 'up') {
 			editor.value.addElementBefore(newRow, rows[0])
 		} else {
 			editor.value.addElementAfter(newRow, rows[0])
 		}
-		editor.value.formatElementStack()
+		//重置光标
 		editor.value.range!.anchor.moveToStart(newRow)
 		editor.value.range!.focus.moveToStart(newRow)
+		//渲染
+		editor.value.formatElementStack()
 		editor.value.domRender()
 		editor.value.rangeRender()
 		//更新工具条位置
@@ -854,25 +1028,67 @@ const deleteTableRow = () => {
 		editor.value.range!.anchor.element = editor.value.range!.focus.element
 		editor.value.range!.anchor.offset = editor.value.range!.focus.offset
 	}
-	const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'table' })
-	const rows = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'tr' })
-	if (tables.length == 1 && rows.length == 1) {
-		const parent = rows[0].parent!
-		if (parent.children!.length == 1) {
+	const columns = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'td' })
+	if (columns.length == 1) {
+		//光标所在行
+		const row = columns[0].parent!
+		//如果只有一行则删除表格
+		if (row.parent!.children!.length == 1) {
 			deleteElement('table')
 			return
 		}
-		const previousRow = editor.value.getPreviousElement(rows[0])!
-		const nextRow = editor.value.getNextElement(rows[0])!
-		rows[0].toEmpty()
-		editor.value.formatElementStack()
+		//光标所在的单元格在行中的序列
+		const index = row.children!.findIndex(item => {
+			return item.isEqual(columns[0])
+		})
+		//上一行
+		const previousRow = editor.value.getPreviousElement(row)
+		//下一行
+		const nextRow = editor.value.getNextElement(row)
+		//遍历行中的每一个单元格
+		row.children!.forEach((item, i) => {
+			//获取单元格占的行数
+			const itemSpanNum = getCellSpanNumber(item)
+			//是隐藏的单元格
+			if (item.hasMarks() && item.marks!['data-editify-merged']) {
+				const { crossRowElement } = getCellMergeElement(editor.value, item)
+				//如果是被跨行单元格合并的
+				if (crossRowElement) {
+					const { rowspan } = getCellSpanNumber(crossRowElement)
+					if (rowspan - 1 == 1) {
+						delete crossRowElement.marks!['rowspan']
+					} else {
+						crossRowElement.marks!['rowspan'] = rowspan - 1
+					}
+				}
+			}
+			//是跨行的单元格
+			else if (itemSpanNum.rowspan > 1) {
+				//获取下一行
+				let el = editor.value.getNextElement(row)
+				if (el && itemSpanNum.rowspan - 1 > 1) {
+					if (el.children![i].hasMarks()) {
+						el.children![i].marks!['rowspan'] = itemSpanNum.rowspan - 1
+					} else {
+						el.children![i].marks = {
+							rowspan: itemSpanNum.rowspan - 1
+						}
+					}
+				}
+			}
+		})
+		//删除行
+		row.toEmpty()
+		//重置光标
 		if (previousRow) {
-			editor.value.range!.anchor.moveToEnd(previousRow.children![0])
-			editor.value.range!.focus.moveToEnd(previousRow.children![0])
+			editor.value.range!.anchor.moveToEnd(previousRow.children![index])
+			editor.value.range!.focus.moveToEnd(previousRow.children![index])
 		} else {
-			editor.value.range!.anchor.moveToEnd(nextRow.children![0])
-			editor.value.range!.focus.moveToEnd(nextRow.children![0])
+			editor.value.range!.anchor.moveToEnd(nextRow!.children![index])
+			editor.value.range!.focus.moveToEnd(nextRow!.children![index])
 		}
+		//渲染
+		editor.value.formatElementStack()
 		editor.value.domRender()
 		editor.value.rangeRender()
 		//更新工具条位置
@@ -888,42 +1104,315 @@ const deleteTableColumn = () => {
 		editor.value.range!.anchor.offset = editor.value.range!.focus.offset
 	}
 	const columns = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'td' })
-	const tbodys = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'tbody' })
-	const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'table' })
-	if (tables.length == 1 && tbodys.length == 1 && columns.length == 1) {
-		const rows = tbodys[0].children!
-		const parent = columns[0].parent!
-		if (parent.children!.length == 1) {
+	if (columns.length == 1) {
+		//光标所在行
+		const row = columns[0].parent!
+		//所有的行元素
+		const rows = row.parent!.children!
+		//表格元素
+		const table = row.parent!.parent!
+		//如果光标所在行只有一个单元格则删除表格
+		if (row.children!.length == 1) {
 			deleteElement('table')
 			return
 		}
-		const previousColumn = editor.value.getPreviousElement(columns[0])!
-		const nextColumn = editor.value.getNextElement(columns[0])!
-		const index = columns[0].parent!.children!.findIndex(item => {
+		//光标所在的单元格在行中的序列
+		const index = row.children!.findIndex(item => {
 			return item.isEqual(columns[0])
 		})
-		//删除列
-		rows.forEach(row => {
-			row.children![index].toEmpty()
+		//前一个单元格
+		const previousColumn = editor.value.getPreviousElement(columns[0])
+		//后一个单元格
+		const nextColumn = editor.value.getNextElement(columns[0])
+		//遍历所有的行元素
+		rows.forEach(item => {
+			//对应序列的单元格
+			const cell = item.children![index]
+			const cellSpanNum = getCellSpanNumber(cell)
+			//是隐藏的单元格
+			if (cell.hasMarks() && cell.marks!['data-editify-merged']) {
+				const { crossColumnElement } = getCellMergeElement(editor.value, cell)
+				//如果是被跨列单元格合并的
+				if (crossColumnElement) {
+					const { colspan } = getCellSpanNumber(crossColumnElement)
+					if (colspan - 1 == 1) {
+						delete crossColumnElement.marks!['colspan']
+					} else {
+						crossColumnElement.marks!['colspan'] = colspan - 1
+					}
+				}
+			}
+			//跨列的单元格
+			else if (cellSpanNum.colspan > 1) {
+				//获取下一个单元格
+				let el = editor.value.getNextElement(cell)
+				if (el && cellSpanNum.colspan - 1 > 1) {
+					if (el.hasMarks()) {
+						el.marks!['colspan'] = cellSpanNum.colspan - 1
+					} else {
+						el.marks = {
+							colspan: cellSpanNum.colspan - 1
+						}
+					}
+				}
+			}
+			cell.toEmpty()
 		})
 		//删除col
-		const colgroup = tables[0].children!.find(item => {
+		const colgroup = table.children!.find(item => {
 			return item.parsedom == 'colgroup'
 		})!
 		colgroup.children![index].toEmpty()
-		//渲染
-		editor.value.formatElementStack()
 		if (previousColumn) {
 			editor.value.range!.anchor.moveToEnd(previousColumn)
 			editor.value.range!.focus.moveToEnd(previousColumn)
 		} else {
-			editor.value.range!.anchor.moveToEnd(nextColumn)
-			editor.value.range!.focus.moveToEnd(nextColumn)
+			editor.value.range!.anchor.moveToEnd(nextColumn!)
+			editor.value.range!.focus.moveToEnd(nextColumn!)
 		}
+		//渲染
+		editor.value.formatElementStack()
 		editor.value.domRender()
 		editor.value.rangeRender()
 	}
 }
+//合并单元格
+const mergeCells = (type: 'left' | 'right' | 'up' | 'down') => {
+	if (!canMergeCells.value(type)) {
+		return
+	}
+	if (!editor.value.range!.anchor.isEqual(editor.value.range!.focus)) {
+		editor.value.range!.anchor.element = editor.value.range!.focus.element
+		editor.value.range!.anchor.offset = editor.value.range!.focus.offset
+	}
+	const columns = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: 'td' })
+	if (columns.length == 1) {
+		//向左合并单元格
+		if (type == 'left') {
+			//当前单元格所占行数和列数
+			const cellSpanNum = getCellSpanNumber(columns[0])
+			//获取左侧单元格
+			const previousColumn = editor.value.getPreviousElement(columns[0])
+			//如果左侧单元格存在
+			if (previousColumn) {
+				//左侧单元格是隐藏的单元格
+				if (previousColumn.hasMarks() && previousColumn.marks!['data-editify-merged']) {
+					//获取合并该隐藏单元格的那个单元格
+					const { crossColumnElement } = getCellMergeElement(editor.value, previousColumn)
+					//如果是被跨列合并则判断跨列单元格占据的行数与当前单元格的行数是否一致
+					if (crossColumnElement) {
+						const { rowspan, colspan } = getCellSpanNumber(crossColumnElement)
+						//进行合并
+						if (rowspan == cellSpanNum.rowspan) {
+							crossColumnElement.marks!['colspan'] = colspan + cellSpanNum.colspan
+							columns[0].children!.forEach(item => {
+								crossColumnElement.children!.push(item)
+								item.parent = crossColumnElement
+							})
+							setTableCellMerged(columns[0])
+							editor.value.range!.anchor.moveToEnd(crossColumnElement)
+							editor.value.range!.focus.moveToEnd(crossColumnElement)
+							editor.value.formatElementStack()
+							editor.value.domRender()
+							editor.value.rangeRender()
+						}
+					}
+				}
+				//左侧单元格不是隐藏的单元格
+				else {
+					//判断所占行数是否一致
+					const { rowspan, colspan } = getCellSpanNumber(previousColumn)
+					//进行合并
+					if (rowspan == cellSpanNum.rowspan) {
+						if (previousColumn.hasMarks()) {
+							previousColumn.marks!['colspan'] = colspan + cellSpanNum.colspan
+						} else {
+							previousColumn.marks = {
+								colspan: colspan + cellSpanNum.colspan
+							}
+						}
+						columns[0].children!.forEach(item => {
+							previousColumn.children!.push(item)
+							item.parent = previousColumn
+						})
+						setTableCellMerged(columns[0])
+						editor.value.range!.anchor.moveToEnd(previousColumn)
+						editor.value.range!.focus.moveToEnd(previousColumn)
+						editor.value.formatElementStack()
+						editor.value.domRender()
+						editor.value.rangeRender()
+					}
+				}
+			}
+		}
+		//向右合并单元格
+		else if (type == 'right') {
+			//当前单元格所占行数和列数
+			const cellSpanNum = getCellSpanNumber(columns[0])
+			//获取右侧的单元格
+			let nextColumn = editor.value.getNextElement(columns[0])
+			//如果右侧单元格存在
+			while (nextColumn) {
+				//右侧单元格是隐藏的单元格
+				if (nextColumn.hasMarks() && nextColumn.marks!['data-editify-merged']) {
+					//获取合并该隐藏单元格的那个单元格
+					const { crossColumnElement } = getCellMergeElement(editor.value, nextColumn)
+					//如果是被跨列合并的表示属于当前单元格内，继续向右查询
+					if (crossColumnElement) {
+						nextColumn = editor.value.getNextElement(nextColumn)
+					}
+					//被跨行合并的直接结束，不能向右合并
+					else {
+						break
+					}
+				}
+				//右侧单元格不是隐藏的
+				else {
+					//判断行数是否与当前单元格一致
+					const { rowspan, colspan } = getCellSpanNumber(nextColumn)
+					//如果一致则可以合并
+					if (rowspan == cellSpanNum.rowspan) {
+						if (columns[0].hasMarks()) {
+							columns[0].marks!['colspan'] = cellSpanNum.colspan + colspan
+						} else {
+							columns[0].marks = {
+								colspan: cellSpanNum.colspan + colspan
+							}
+						}
+						nextColumn.children!.forEach(item => {
+							columns[0].children!.push(item)
+							item.parent = columns[0]
+						})
+						setTableCellMerged(nextColumn)
+						editor.value.range!.anchor.moveToEnd(columns[0])
+						editor.value.range!.focus.moveToEnd(columns[0])
+						editor.value.formatElementStack()
+						editor.value.domRender()
+						editor.value.rangeRender()
+					}
+					//不管是否一致都直接结束
+					break
+				}
+			}
+		}
+		//向上合并单元格
+		else if (type == 'up') {
+			//当前单元格所占行数和列数
+			const cellSpanNum = getCellSpanNumber(columns[0])
+			//获取单元格在行中的序列
+			const index = columns[0].parent!.children!.findIndex(item => item.isEqual(columns[0]))
+			//获取上一行
+			const previousRow = editor.value.getPreviousElement(columns[0].parent!)
+			//如果上一行存在
+			if (previousRow) {
+				//获取上一行中对应序列的单元格
+				const previousColumn = previousRow.children![index]
+				//单元格是隐藏的单元格
+				if (previousColumn.hasMarks() && previousColumn.marks!['data-editify-merged']) {
+					//获取合并该隐藏单元格的那个单元格
+					const { crossRowElement } = getCellMergeElement(editor.value, previousColumn)
+					//如果是被跨行合并则判断跨列单元格占据的列数与当前单元格的列数是否一致
+					if (crossRowElement) {
+						const { rowspan, colspan } = getCellSpanNumber(crossRowElement)
+						//进行合并
+						if (colspan == cellSpanNum.colspan) {
+							crossRowElement.marks!['rowspan'] = rowspan + cellSpanNum.rowspan
+							columns[0].children!.forEach(item => {
+								crossRowElement.children!.push(item)
+								item.parent = crossRowElement
+							})
+							setTableCellMerged(columns[0])
+							editor.value.range!.anchor.moveToEnd(crossRowElement)
+							editor.value.range!.focus.moveToEnd(crossRowElement)
+							editor.value.formatElementStack()
+							editor.value.domRender()
+							editor.value.rangeRender()
+						}
+					}
+				}
+				//单元格不是隐藏的单元格
+				else {
+					//判断所占列数是否一致
+					const { rowspan, colspan } = getCellSpanNumber(previousColumn)
+					//进行合并
+					if (colspan == cellSpanNum.colspan) {
+						if (previousColumn.hasMarks()) {
+							previousColumn.marks!['rowspan'] = rowspan + cellSpanNum.rowspan
+						} else {
+							previousColumn.marks = {
+								rowspan: rowspan + cellSpanNum.rowspan
+							}
+						}
+						columns[0].children!.forEach(item => {
+							previousColumn.children!.push(item)
+							item.parent = previousColumn
+						})
+						setTableCellMerged(columns[0])
+						editor.value.range!.anchor.moveToEnd(previousColumn)
+						editor.value.range!.focus.moveToEnd(previousColumn)
+						editor.value.formatElementStack()
+						editor.value.domRender()
+						editor.value.rangeRender()
+					}
+				}
+			}
+		}
+		//向下合并单元格
+		else if (type == 'down') {
+			//当前单元格所占行数和列数
+			const cellSpanNum = getCellSpanNumber(columns[0])
+			//获取单元格在行中的序列
+			const index = columns[0].parent!.children!.findIndex(item => item.isEqual(columns[0]))
+			//获取下一行
+			let nextRow = editor.value.getNextElement(columns[0].parent!)
+			//如果下一行存在
+			while (nextRow) {
+				//获取下一行中对应序列的单元格
+				const nextColumn = nextRow.children![index]
+				//单元格是隐藏的单元格
+				if (nextColumn.hasMarks() && nextColumn.marks!['data-editify-merged']) {
+					//获取合并该隐藏单元格的那个单元格
+					const { crossRowElement } = getCellMergeElement(editor.value, nextColumn)
+					//如果是被跨行合并的表示属于当前单元格内，继续向下查询
+					if (crossRowElement) {
+						nextRow = editor.value.getNextElement(nextRow)
+					}
+					//被跨列合并的直接结束，不能向右合并
+					else {
+						break
+					}
+				}
+				//单元格不是隐藏的
+				else {
+					//判断列数是否与当前单元格一致
+					const { rowspan, colspan } = getCellSpanNumber(nextColumn)
+					//如果一致则可以合并
+					if (colspan == cellSpanNum.colspan) {
+						if (columns[0].hasMarks()) {
+							columns[0].marks!['rowspan'] = cellSpanNum.rowspan + rowspan
+						} else {
+							columns[0].marks = {
+								rowspan: cellSpanNum.rowspan + rowspan
+							}
+						}
+						nextColumn.children!.forEach(item => {
+							columns[0].children!.push(item)
+							item.parent = columns[0]
+						})
+						setTableCellMerged(nextColumn)
+						editor.value.range!.anchor.moveToEnd(columns[0])
+						editor.value.range!.focus.moveToEnd(columns[0])
+						editor.value.formatElementStack()
+						editor.value.domRender()
+						editor.value.rangeRender()
+					}
+					//不管是否一致都直接结束
+					break
+				}
+			}
+		}
+	}
+}
 //浮层显示时
 const layerShow = () => {
 	//链接初始化展示