点击编辑 API

TinaCMS 的“点击编辑”功能允许编辑者选择他们想要在页面上点击的 HTML 元素，以便在侧边栏中查看相应的字段。

我们可以通过 data-tina-field API 来实现这一点。

[data-tina-field] 必须应用于 HTML 元素，而不是像 TinaMarkdown 这样的 React 组件。

API 参考

注意: object 属性只需要包含您尝试访问的字段的最近祖先。

基本用法

自定义组件和 [data-tina-field]

React 组件不能接受像 data-tina-field 这样的任意 HTML 属性。为了解决这个问题，定义一个属性（例如 tinaField）并将其传递给组件内部的 HTML 元素：

TinaMarkdown 和 tinaField

当使用 TinaMarkdown 与自定义组件时，传递给每个组件的 props 对象已经包含了 _content_source 元数据。这个元数据通过 TinaCMS 的 useTina 钩子在编辑模式下自动注入。

要使组件可编辑，您只需将 props 对象直接传递给 tinaField 助手：

这会链接到 TinaCMS 内的模板组件，但不会定位到特定字段。

如果您想在组件内部定位特定字段，例如，仅 format 属性而不是整个块。使用 tinaField 的第二个参数来指定字段名称：

这为 TinaCMS 提供了一个更精确的字段映射，基于您在集合中定义的模板定义。

示例：在 TinaMarkdown 中使用 tinaField

这是一个稍微高级一点的示例，展示了如何使用 tinaField 在富文本内容中甚至在自定义组件内公开字段：

这样编辑者可以点击自定义组件内的任何嵌套字段，并直接跳转到该模板字段。

元数据结构

当 TinaCMS 处于编辑模式时，它会为每个可编辑字段增强数据的元数据。例如，一个富文本模板字段可能看起来像：

tinaField 助手读取这个 _content_source 元数据，以构建正确的路径，使编辑器 UI 能够将字段与表单连接。

样式化可视化编辑界面

当编辑模式激活时，TinaCMS 会自动为任何 [data-tina-field] 元素应用轮廓。

如果需要，您可以覆盖这些样式：