富文本字段
富文本字段存储Markdown内容,具有所见即所得的界面,支持文本格式化、链接、媒体和自定义元素(如果与mdx一起使用)。
类型定义
有关所有字段类型的其他常见属性,请查看字段类型定义。
将此设置为 "rich-text" 以使用富文本字段。
字段的内部使用名称。
当集合的 format 是markdown或MDX时,此字段的值将保存为文件的主体,集合中的其他字段将保存到frontmatter。
MDX支持。在编辑器中使用"embed"选项注入自定义React组件。
All properties marked as REQUIRED must be specified for the field to work properly.
templates属性用于mdx支持。
parser位于字段的顶层,与templates并列。它不是overrides之一。
解析器默认来自集合,而不是字段。format为mdx的集合获取{ type: 'mdx' },其他格式获取{ type: 'markdown' }。当您想要不同的东西时,在字段上设置parser,例如一个应解析为普通markdown的.mdx集合。
"children"不应作为富文本字段的name使用,因为它与应用程序的其他部分冲突。
mark是一个保留的组件名称,用于内部的高亮功能。如果您创建一个名为mark的自定义MDX组件,它将与高亮功能冲突,并导致编辑器中出现意外行为。
属性控制一系列对富文本编辑器的覆盖和自定义。
选择显示哪些工具栏选项。支持以下选项:['heading', 'link', 'image', 'quote', 'ul', 'ol', 'bold', 'italic', 'code', 'codeBlock', 'mermaid', 'table', 'raw', 'embed']。
是否启用或禁用富文本浮动工具栏。
限制编辑器UI中提供的标题级别。接受['h1', 'h2', 'h3', 'h4', 'h5', 'h6']的任何子集。当省略时,所有级别都可用。
换行
要在TinaCMS富文本中插入可见的换行(例如,在引用中),请在您想要换行的地方按Shift + Enter(软回车)。
保存后,检查Markdown。保留的换行显示为独立的\行:
此行为不是标准Markdown规范的一部分,而是TinaCMS富文本实现的特定功能。
表格
查看此视频,了解如何在富文本编辑器中使用表格:
不支持多行单元格,因为内容被序列化为Markdown。表格仅支持单行行和单元格。如果需要表示多行内容,请使用列表或单独的字段。
列对齐
可视化编辑器当前不支持通过工具栏设置列对齐。如果需要在表格列中对齐内容,可以切换到原始Markdown模式并编辑表头分隔行中的对齐语法。
示例——居中第二和第三列:
要了解更多关于对齐语法的信息,请参考Markdown扩展语法
高亮
自定义高亮颜色
您可以在富文本字段中启用文本高亮,并通过向字段的overrides添加highlightColors数组来定义可供编辑者使用的高亮颜色。
示例
TinaCMS将根据提供的配置生成适当的组件。
简单字段
带工具栏覆盖的简单字段
更改您想要显示的内容及其在编辑器中的显示顺序
限制可用的标题级别
使用headingLevels控制编辑者可以选择的标题。传递['h1', 'h2', 'h3', 'h4', 'h5', 'h6']的任何子集,以任何顺序——该值应用于标题下拉菜单、“转换为”菜单、斜杠菜单和Markdown自动格式化快捷方式(例如,输入## 用于h2)。当省略时,所有六个级别都可用。
headingLevels在tinacms@3.8.4中发布。更新您的包以使用它。
此选项仅限于UI——它限制了编辑者可以插入的内容。已经使用不允许级别的现有内容仍然按原样呈现。传递一个空数组(headingLevels: [])将从编辑器中移除所有标题级别。
带自定义组件的字段(mdx)
自定义组件可以嵌入到富文本块中。
带默认富文本值的集合
要为富文本字段设置默认值,应指定整个AST树,如下例所示。
推荐的方法是填写您的数据,然后console.log相关字段的CMS API返回值。
然后将其从那里复制到集合的defaultItem属性中。