文档

学习

v.Latest

Documentation

富文本字段

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

类型定义

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

REQUIRED

type

string

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

REQUIRED

name

string

字段的内部使用名称。

toolbarOverride

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

文档

学习

文档

学习

Custom List Rendering

Join the Herd!