文档

{
  label: "图像饱和度",
  name: "saturation",
  type: "number",
  description: "我的自定义饱和度字段",
  ui: {
    parse: (val) => Number(val),
    component: wrapFieldsWithMeta(({ field, input, meta }) => {
      return (
        <div>
          <input
            name="saturation"
            id="saturation"
            type="range"
            min="0"
            max="10"
            step=".1"
            // 传递 props.input.onChange
            {...input}
          />
          <br />
          值: {input.value}
        </div>
      )
    })
  }
}

带有隐藏元字段的图像组件

NextJS 和其他框架能够在提前知道图像宽度和高度的情况下提高性能。

TinaCMS 可以用于在上传时确定并存储这些信息。

我们可以传递现有的 TinaCMS 图像组件，并使用 useEffect 拦截对它的更改，以更新我们的宽度和高度字段。


import { ImageField } from 'tinacms';

const CustomImageField = (props) => {

  const loadImage = async (url) => {
    const img = new Image();
    img.src = url;
    await img.decode();
    return img;
  };
  const { form, input } = props;

  useEffect(() => {
    loadImage(input.value).then((img) => {
      form.change("imgWidth", img.naturalWidth);
      form.change("imgHeight", img.naturalHeight);
    });
  }, [form, input]);
  
  return ImageField(props);
};

在内容模型中，我们还需要两个额外的字段用于高度和宽度，这些字段设置为 "hidden"，因此它们不会出现在编辑器中。

{
  type: 'image',
  label: '主图像',
  name: 'imgSrc',
  ui: {
    component: CustomImageField,
  },
},
{
  type: "number",
  name: "imgWidth",
  ui: {
    component: "hidden",
  },
},
{
  type: "number",
  name: "imgHeight",
  ui: {
    component: "hidden",
  },
}

这在编辑器中显示为一个单一的图像输入，但每次更新时将保存 3 个值（图像来源、高度和宽度）。

imgSrc: /uploads/llama - 2.avif
imgWidth: 987
imgHeight: 1480

条件组件

可以通过检查其他表单字段的值来创建条件字段。

使用这种方法，隐藏的条件字段将保留在隐藏之前保存的任何值。

{
  type: "boolean",
  name: "imageEnabled",
  label: "启用图像",
},
{
  type: 'image',
  label: '主图像',
  name: 'imgSrc',
  ui: {
  component: (props) => {
    const { form } = props;
    return form.getFieldState("imageEnabled")?.value ?
      ImageField(props) : null;
    },
  },
},

图标选择器组件（视频）

下面的教程包括一个关于使用自定义字段组件创建自定义图标选择器的部分。

上次编辑: April 1, 2025

文档

学习

文档

学习

自定义列表渲染

Join the Herd!