抠丁客
tiptap 表格
引言
在文本编辑器中添加表格是一件非常有趣的事情。Table 扩展允许你在编辑器中加入这个 WYSIWYG 编辑的圣杯。
别忘了添加 spacer.gif 。（开玩笑的，如果你不知道那是什么，就忽略这句话吧。）
安装
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
这个扩展需要 TableRow、TableHeader 和 TableCell 节点。
配置
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: true });
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();