表格扩展
没有什么比一个老派的 HTML 表格更有趣了。Table 扩展使您能够将这个 WYSIWYG 编辑的圣杯添加到您的编辑器中。
别忘了添加一个 spacer.gif。 （开玩笑。如果您不知道那是什么，请忽略。）
安装
npm install @tiptap/extension-table这个扩展在 TableKit 扩展中默认安装，所以你不需要单独安装它。
import { Editor } from '@tiptap/core'
import { TableKit } from '@tiptap/extension-table'
new Editor({
extensions: [TableKit],
})设置
HTMLAttributes
要添加到渲染的 HTML 标签中的自定义 HTML 属性。
Table.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})resizable
默认值: false
handleWidth
默认值: 5
cellMinWidth
默认值: 25
View
默认值: TableView
lastColumnResizable
默认值: true
allowTableNodeSelection
默认值: false
命令
insertTable()
默认情况下创建一个三乘三的表格，包括一个表头行。您可以指定自定义的行、列和表头设置：
editor.commands.insertTable()
editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: false })addColumnBefore()
在当前列之前添加一列。
editor.commands.addColumnBefore()addColumnAfter()
在当前列之后添加一列。
editor.commands.addColumnAfter()deleteColumn()
删除当前列。
editor.commands.deleteColumn()addRowBefore()
在当前行上方添加一行。
editor.commands.addRowBefore()addRowAfter()
在当前行下方添加一行。
editor.commands.addRowAfter()deleteRow()
删除当前行。
editor.commands.deleteRow()deleteTable()
删除整个表格。
editor.commands.deleteTable()mergeCells()
将所有选定的单元格合并为一个单元格。
editor.commands.mergeCells()splitCell()
拆分当前单元格。
editor.commands.splitCell()toggleHeaderColumn()
将当前列设为表头列。
editor.commands.toggleHeaderColumn()toggleHeaderRow()
将当前行设为表头行。
editor.commands.toggleHeaderRow()toggleHeaderCell()
将当前单元格设为表头单元格。
editor.commands.toggleHeaderCell()mergeOrSplit()
如果选择了多个单元格，则将其合并。如果选择了单个单元格，则将其拆分为两个单元格。
editor.commands.mergeOrSplit()setCellAttribute()
为当前单元格设置指定属性。可以是您在 TableCell 扩展中定义的任何内容，例如背景颜色。确保首先注册 您的自定义属性。
editor.commands.setCellAttribute('customAttribute', 'value')
editor.commands.setCellAttribute('backgroundColor', '#000')goToNextCell()
转到下一个单元格。
editor.commands.goToNextCell()goToPreviousCell()
转到上一个单元格。
editor.commands.goToPreviousCell()fixTables()
检查文档中的所有表格，并在必要时修复它们。
editor.commands.fixTables()源代码
最小安装
import { Editor } from '@tiptap/core'
import { Table } from '@tiptap/extension-table/table'
new Editor({
extensions: [Table],
})