Loving Tina? us on GitHub0.0k

文档

学习

v.Latest
Documentation
Markdown表格
目录

Usage

这是旧版本功能,不再维护。富文本编辑器现在原生支持表格。

表格通过从tinacms导出的自定义模板来支持。要使用它,导入它并将其作为template提供给你的rich-text字段:

import { tinaTableTemplate } from 'tinacms'
{
type: 'rich-text',
label: 'Body',
name: '_body',
templates: [
tinaTableTemplate,
]
}

<TinaMarkdown>中使用table组件来渲染它。注意表格单元格的value是一个富文本元素,所以应该使用嵌套的<TinaMarkdown>组件来渲染:

const MyTable = props => <table>
{props.tableRows?.map((tableRow, i) => (
<tbody key={i}>
<tr>
{tableRow.tableCells?.map((tableCell, j) => (
<td key={j}>
<TinaMarkdown content={tableCell.value} />
</td>
))}
</tr>
</tbody>
))}
</table>
<TinaMarkdown content={data.page._body} components={{ table: (props) => <MyTable {...props} /> }} />

展示

已知问题

表格只能在创建后立即添加单元格数据时保存,在离开CMS子窗口之前。这个问题只会在表格初次创建时发生。

上次编辑: February 10, 2025