代码之家 › 专栏 › 技术社区 › Enrique Moreno Tent

sanity.io-为“块”类型的文本编辑器添加颜色

sanity

1

Enrique Moreno Tent · 技术社区 · 6 年前

block 获取所见即所得编辑器。看起来是这样的:

{
  title: "Block",
  type: "block",

  styles: [
    { title: "Normal", value: "normal" },
    { title: "H1", value: "h1" },
    { title: "H2", value: "h2" },
    { title: "H3", value: "h3" },
    { title: "H4", value: "h4" },
    { title: "Quote", value: "blockquote" }
  ],
  lists: [{ title: "Bullet", value: "bullet" }],
  marks: {
    decorators: [
      { title: "Strong", value: "strong" },
      { title: "Emphasis", value: "em" }
    ],
    annotations: [
      {
        title: "URL",
        name: "link",
        type: "object",
        fields: [
          {
            title: "URL",
            name: "href",
            type: "url"
          }
        ]
      }
    ]
  }
}

1 回复 | 直到 6 年前

1

thomax 6 年前

这确实有一个插件。在你的终端, cd 转到Sanity Content Studio文件夹,然后运行:

sanity install @sanity/color-input

@sanity/color-input 到 plugins 数组,并在本地安装

然后,继续添加 color 输入到 annotations 要启用文本颜色的块内容中的数组。例如。:

export default {
  name: 'blockContent',
  type: 'array',
  title: 'Block Content with Color',
  of: [
    {
      type: 'block',
      marks: {
        annotations: [
          {name: 'color', title: 'Color', type: 'color'}
        ]
      }
    }
  ]
}

另外,请记住,现在您将获得带有颜色细节的文本注释。您的前端如何(如果)选择 render the structured text