文档

学习

v.Latest
Documentation
富文本字段
Table of Contents

富文本字段通过WYSIWYG界面存储Markdown内容,支持文本格式化、链接、媒体和自定义元素(如果与mdx一起使用)。

类型定义

有关所有字段类型通用的附加属性,请参阅字段类型定义。
REQUIRED
type
string

将此设置为 "rich-text" 以使用富文本字段。


REQUIRED
name
string

字段的内部使用名称。


toolbar​Override
string[]

选择要显示的特定工具栏选项。


templates
Template[]

MDX支持。在编辑器中使用 "embed" 选项注入自定义React组件。

All properties marked as REQUIRED must be specified for the field to work properly.

templates 属性用于 mdx 支持。

"children" 不应作为富文本字段的 name 使用,因为它会与应用程序的其他部分冲突。

工具栏自定义

toolbarOverride 属性控制富文本编辑器中显示的选项。

它可以设置为以下任意子集:

toolbarOverride: [
'heading',
'link',
'image',
'quote',
'ul',
'ol',
'bold',
'italic',
'code',
'codeBlock',
'mermaid',
'table',
'raw',
'embed',
];

换行

要在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,
},
],
}
上次编辑: March 26, 2025