富文本字段通过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
使用,因为它会与应用程序的其他部分冲突。
toolbarOverride
属性控制富文本编辑器中显示的选项。
它可以设置为以下任意子集:
toolbarOverride: ['heading','link','image','quote','ul','ol','bold','italic','code','codeBlock','mermaid','table','raw','embed',];
要在TinaCMS富文本中插入空行的换行符:
此行为不是标准Markdown规范的一部分,而是TinaCMS富文本实现的特定功能。
查看此视频,了解如何在富文本编辑器中使用表格:
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,},],}