这是旧版本功能,不再维护。富文本编辑器现在原生支持表格。
表格通过从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子窗口之前。这个问题只会在表格初次创建时发生。