富文本字段
富文本字段通过WYSIWYG界面存储Markdown内容,支持文本格式化、链接、媒体和自定义元素(如果与mdx一起使用)。
类型定义
有关所有字段类型的其他常见属性,请查看字段类型定义。
设置为 "rich-text" 以使用富文本字段。
字段的内部使用名称。
MDX支持。在编辑器中使用"embed"选项注入自定义React组件。
All properties marked as REQUIRED must be specified for the field to work properly.
templates属性用于mdx支持。
"children"不应作为富文本字段的name使用,因为它与应用程序的其他部分冲突。
mark是一个保留的组件名称,内部用于高亮功能。如果您创建了一个名为 mark 的自定义 MDX 组件,它将与高亮功能冲突,并导致编辑器中的意外行为。
属性控制对富文本编辑器的一系列覆盖和自定义。
选择显示哪些工具栏选项。支持以下选项:['heading', 'link', 'image', 'quote', 'ul', 'ol', 'bold', 'italic', 'code', 'codeBlock', 'mermaid', 'table', 'raw', 'embed']。
是否启用或禁用富文本浮动工具栏。
换行
要在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.logCMS 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,},],}