Sanity.io能否实现带文字环绕的内联浮动图片？

要实现你需要的文字环绕内联浮动图片（同时在Sanity Studio和发布页面生效），核心是通过自定义Portable Text的内联标记（inline mark）实现，而非使用独立的图片块。以下是具体步骤：

一、Sanity Studio端配置 #

1. 定义内联图片的Schema类型 #

在schema文件中添加自定义内联图片对象类型，存储图片资产、浮动方向和宽度配置：

// schemas/marks/inlineImage.js
export default {
  name: 'inlineImage',
  type: 'object',
  title: '内联浮动图片',
  fields: [
    {
      name: 'image',
      type: 'image',
      title: '图片',
      options: { hotspot: true }
    },
    {
      name: 'float',
      type: 'string',
      title: '浮动方向',
      options: {
        list: [
          { title: '左浮动', value: 'left' },
          { title: '右浮动', value: 'right' }
        ],
        layout: 'radio'
      },
      defaultValue: 'left'
    },
    {
      name: 'width',
      type: 'string',
      title: '宽度占比',
      options: {
        list: [
          { title: '25%', value: '25' },
          { title: '33%', value: '33' },
          { title: '50%', value: '50' }
        ]
      },
      defaultValue: '33'
    }
  ]
}

2. 将内联图片添加到Portable Text的marks配置 #

在Portable Text字段schema中，把inlineImage加入marks数组：

// schemas/blocks/body.js
export default {
  name: 'body',
  type: 'array',
  title: '正文',
  of: [
    {
      type: 'block',
      marks: {
        annotations: [
          { type: 'link' }, // 保留原有注释类型
          { type: 'inlineImage' } // 添加自定义内联图片
        ]
      }
    }
  ]
}

3. 自定义Studio内预览组件（实现编辑器内文字环绕） #

为让Studio编辑器直接显示文字环绕效果，给inlineImage标记添加自定义渲染组件：

// components/InlineImagePreview.js
import React from 'react'
import { getImageDimensions } from '@sanity/asset-utils'

export default function InlineImagePreview({ value }) {
  if (!value?.image) return null
  const { width, height } = getImageDimensions(value.image)
  const aspectRatio = height / width * 100
  return (
    <span
      style={{
        float: value.float,
        margin: '0 12px 12px 0',
        maxWidth: `${value.width}%`,
        display: 'inline-block'
      }}
    >
      <img
        src={value.image.asset.url}
        alt="内联浮动图片"
        style={{
          width: '100%',
          height: 'auto',
          borderRadius: '4px'
        }}
      />
    </span>
  )
}

然后在schema中关联该预览组件：

// schemas/marks/inlineImage.js
import InlineImagePreview from '../../components/InlineImagePreview'

export default {
  // 原有字段配置
  components: {
    annotation: InlineImagePreview
  }
}

二、前端发布页面渲染 #

以Next.js使用@portabletext/react为例，处理Portable Text渲染时识别inlineImage标记，输出带浮动样式的图片：

1. 配置Portable Text渲染器 #

// components/PortableText.js
import { PortableText } from '@portabletext/react'
import Image from 'next/image'

const components = {
  marks: {
    inlineImage: ({ value }) => {
      const floatClass = value.float === 'left' ? 'float-left' : 'float-right'
      const widthClass = `w-${value.width}`
      return (
        <span className={`${floatClass} ${widthClass} mr-4 mb-4 inline-block`}>
          <Image
            src={value.image.asset.url}
            alt="内联浮动图片"
            width={value.image.asset.metadata.dimensions.width}
            height={value.image.asset.metadata.dimensions.height}
            className="rounded"
          />
        </span>
      )
    }
  }
}

export default function PortableTextRenderer({ value }) {
  return <PortableText value={value} components={components} />
}

2. 添加CSS样式实现文字环绕 #

在全局样式文件中添加浮动相关样式：

.float-left {
  float: left;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.float-right {
  float: right;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.w-25 { max-width: 25%; }
.w-33 { max-width: 33.333%; }
.w-50 { max-width: 50%; }

/* 确保段落正确环绕浮动元素 */
p {
  overflow: auto;
}

配置完成后，Sanity Studio中插入内联浮动图片时可直接预览文字环绕效果，发布页面也会按配置实现对应布局，解决常规图片块无法让上下文本环绕的问题。

内容的提问来源于stack exchange，提问作者Blue Waters