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

富文本字段

Loading last updated info...
在此页面上

富文本字段通过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

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


heading​Levels
HeadingLevel[]

限制编辑器UI中提供的标题级别。接受 ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] 的任何子集。省略时,所有级别均可用。

换行

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

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

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

表格

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

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

列对齐

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

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

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

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

高亮

自定义高亮颜色

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

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,
},
}

限制可用的标题级别

使用 headingLevels 控制编辑器可以选择的标题。传递 ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] 的任何子集,以任何顺序——该值应用于标题下拉菜单、“转换为”菜单、斜杠菜单和Markdown自动格式化快捷方式(例如,输入 ## 以获得h2)。省略时,所有六个级别均可用。

{
type: 'rich-text',
label: '摘要',
name: 'excerpt',
overrides: {
toolbar: ['heading', 'bold', 'italic', 'link'],
headingLevels: ['h2'],
},
}
headingLevelstinacms@3.8.4 中发布。更新您的包以使用它。

此选项仅限于UI——它限制了编辑器可以插入的内容。现有内容中已经使用的不允许级别仍然按原样呈现。传递一个空数组(headingLevels: [])将从编辑器中移除所有标题级别。

带自定义组件的字段(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,
},
],
}