Loving Tina? us on GitHub0.0k
v.Latest
Documentation

富文本字段

在此页面上

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

类型定义

有关所有字段类型的其他常见属性,请查看字段类型定义。
REQUIRED
type
string

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


REQUIRED
name
string

字段的内部使用名称。


templates
Template[]

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

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

templates 属性用于 mdx 支持。

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

mark 是一个保留的组件名称,内部用于高亮功能。如果您创建了一个名为 mark 的自定义 MDX 组件,它将与高亮功能冲突,并导致编辑器中的意外行为。

属性控制对富文本编辑器的一系列覆盖和自定义。

toolbar
ToolbarOverrideType[]

选择显示哪些工具栏选项。支持以下选项:['heading', 'link', 'image', 'quote', 'ul', 'ol', 'bold', 'italic', 'code', 'codeBlock', 'mermaid', 'table', 'raw', 'embed']


show​Floating​Toolbar
boolean

是否启用或禁用富文本浮动工具栏。

换行

要在TinaCMS富文本中插入可见的换行(例如,在引用内),请在您希望换行的地方按下 Shift + Enter(软回车)。

保存后,检查Markdown。保留的换行显示为独立的 \ 行:

> 引用文本…
> \
> 作者姓名
此行为不是标准Markdown规范的一部分,而是TinaCMS富文本实现的特定功能。

表格

查看此视频,了解如何在富文本编辑器中使用表格:

不支持多行单元格,因为内容被序列化为Markdown。表格仅支持单行行和单元格。如果需要表示多行内容,请使用列表或单独的字段。

列对齐

可视化编辑器当前不支持通过工具栏设置列对齐。如果需要在表格列中对齐内容,可以切换到原始Markdown模式并编辑表头分隔行中的对齐语法。

示例 — 居中第二和第三列:

| 对齐方式 | 分隔符 | 示例 |
| :--- | :---: | ---: |
| 左对齐 | `:---` | 左对齐 |
| 居中 | `:---:` | 居中 |
| 右对齐 | `---:` | 右对齐 |

要了解更多关于对齐语法的信息,请参考Markdown扩展语法

高亮

自定义高亮颜色

您可以在富文本字段中启用文本高亮,并通过添加 highlightColors 数组到字段的 overrides 中来定义可供编辑者使用的高亮颜色。

export const heroBlockSchema = {
fields: [
{
label: "文本",
name: "text",
type: "rich-text",
overrides: {
highlightColors: [
{ label: "紫色", value: "rgba(142, 132, 255, 0.55)" },
{ label: "蓝色", value: "rgba(132, 255, 255, 0.55)" }
],
},
},
],
}

示例

Tina将根据提供的配置生成适当的组件。

简单字段

{
label: "正文",
name: "body",
isBody: true,
type: "rich-text",
}

带工具栏覆盖的简单字段

更改您希望在编辑器中显示的内容及其顺序

{
type: "rich-text",
name: "body",
label: "正文",
isBody: true,
overrides: {
toolbar: ["heading", "bold", "italic"],
showFloatingToolbar: false,
},
}

带自定义组件的字段(mdx

自定义组件可以嵌入到富文本块中。

{
label: "正文",
name: "body",
isBody: true,
type: "rich-text",
templates: [
{
name: "Cta",
label: "Cta",
fields: [{
name: "heading",
label: "标题",
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: '博客文章',
name: 'post',
path: 'content/posts',
defaultItem: () => {
return {
title: '我的新文章',
body: {
type: 'root',
children: [
{
type: 'p',
children: [
{
type: 'text',
text: '默认文本',
},
],
},
],
},
}
},
fields: [
{
type: 'string',
label: '标题',
name: 'title',
},
{
type: 'string',
label: '文章正文',
name: 'body',
isBody: true,
},
],
}
上次编辑: March 5, 2026