提问人：Matt Austin 提问时间：10/25/2023 更新时间：10/27/2023 访问量：48
TipTap 中表节点的有效模式是什么？
Whats the valid schema for table nodes in TipTap?
问：
我使用 insertContent（） 从结构化数据构建了一个 TipTap 编辑器，以编程方式添加节点。
在我尝试构建和添加表之前，这一直非常有效。
我能找到的所有示例都显示了从 html 创建表格，但我非常热衷于从上下文中已有的结构化数据构建内容。
我已经尝试了以下语法的数百种变体，但我似乎无法获得正确的数据结构以传递到 insertContent（）...有谁知道这些数据应该如何正确构建？
const tableNode = {
type: 'table',
rowsCount: 3,
colsCount: 3,
withHeaderRow: true,
headerCells: [{
cellContent: [{ type: 'text', text: 'Header 1' }],
}],
cells: [{
cellContent: [{ type: 'text', text: 'Cell 1' }],
}]
};
editor.value?.chain().focus().insertContent(letterContent).run()
Note: The above code yields the following error in javascript:
*RangeError: Invalid content for node table: <>*
答：
0赞
Matt Austin
10/27/2023
#1
好的，经过几个小时或猜测，我设法弄清楚了这一点，所以发帖以防将来其他人需要它。
表和标头都定义为 type=“tableRow” 的节点。tableRow 的内容是 tableHeader 或 tableCell 类型的节点数组。这些中的每一个都期望像段落一样的内容（尽管可能是其他类型（？
const tableNode = {
type: 'table',
withHeaderRow: true,
content: [{
type: 'tableRow',
content:[{
type: 'tableHeader',
content: [{
type: 'paragraph',
content: [{
type: 'text',
text: 'HEADER 1'
}]
}]
},{
type: 'tableHeader',
content: [{
type: 'paragraph',
content: [{
type: 'text',
text: 'HEADER 2'
}]
}]
}]
},{
type: 'tableRow',
content:[{
type: 'tableCell',
content: [{
type: 'paragraph',
content: [{
type: 'text',
text: 'ROW 1 - CELL 1'
}]
}]
},{
type: 'tableCell',
content: [{
type: 'paragraph',
content: [{
type: 'text',
text: 'ROW 1 - CELL 2'
}]
}]
}]
}]
};
评论