文档
学习
v.Latest
Documentation
富文本字段
在此页面上
富文本字段通过WYSIWYG界面存储Markdown内容，支持文本格式、链接、媒体和自定义元素（如果与mdx一起使用）。
类型定义
有关所有字段类型的其他常见属性，请查看字段类型定义。
REQUIRED
type
string
将此设置为 "rich-text" 以使用富文本字段。
REQUIRED
name
string
字段的内部使用名称。
overrides
ToolbarOverrides
工具栏覆盖和自定义选项。
templates
Template[]
MDX支持。在编辑器中使用"embed"选项注入自定义React组件。
All properties marked as REQUIRED must be specified for the field to work properly.
templates属性用于mdx支持。
"children"不应作为富文本字段的name使用，因为它与应用程序的其他部分冲突。
自定义
overrides属性控制对富文本编辑器的一系列覆盖和自定义。
toolbar
ToolbarOverrideType[]
选择显示哪些工具栏选项。支持以下选项：['heading', 'link', 'image', 'quote', 'ul', 'ol', 'bold', 'italic', 'code', 'codeBlock', 'mermaid', 'table', 'raw', 'embed']。
showFloatingToolbar
boolean
是否启用或禁用富文本浮动工具栏。
换行
要在TinaCMS富文本中插入空行换行：
- 按Shift + Enter创建换行
- 如果换行后没有跟随文本行，它将在最终输出中呈现为\。
可以通过删除并重新创建该行来修复
确保换行前有文本内容以避免此问题
此行为不是标准Markdown规范的一部分，而是TinaCMS富文本实现的特定行为。
表格
查看此视频以了解如何在富文本编辑器中使用表格：
不支持多行单元格，因为内容被序列化为Markdown。表格仅支持单行行和单元格。如果需要表示多行内容，请使用列表或单独的字段。
示例
Tina将根据提供的配置生成适当的组件。
简单字段
{label: "Body",name: "body",isBody: true,type: "rich-text",}
带工具栏覆盖的简单字段
更改要显示的内容及其在编辑器中的显示顺序
{label: "Body",name: "body",isBody: true,type: "rich-text",toolbarOverride: ["heading","bold", "italic"],}
带自定义组件的字段（mdx）
可以在富文本块中嵌入自定义组件。
{label: "Body",name: "body",isBody: true,type: "rich-text",templates: [{name: "Cta",label: "Cta",fields: [{name: "heading",label: "Heading",type: "string"}]}]}
This is some text<Cta heading="Welcome" />
{"data": {"post": {"body": {"type": "root",{"type": "p","children": [{"type": "text","text": "This is some text"}]},{"type": "mdxJsxFlowElement","name": "Cta","props": {"heading": "Welcome"}}]}}}}
带默认富文本值的集合
要为富文本字段设置默认值，应指定整个AST树，如下例所示。
推荐的方法是填写您的数据，然后console.log相关字段的CMS API返回值。
然后将其复制到集合的defaultItem属性中。
{label: 'Blog Posts',name: 'post',path: 'content/posts',defaultItem: () => {return {title: 'My New Post',body: {type: 'root',children: [{type: 'p',children: [{type: 'text',text: 'Default Text',},],},],},}},fields: [{type: 'string',label: 'Title',name: 'title',},{type: 'string',label: 'Post Body',name: 'body',isBody: true,},],}
