---
title: 添加媒体
description: 插入已上传媒体，并处理粘贴或拖入编辑器的图片。
order: 30
toc:
  - id: image-and-video
    title: 图片和视频
  - id: clipboard-images
    title: 剪贴板图片
  - id: editing-media
    title: 编辑媒体
---

## 图片和视频 {#image-and-video}

默认的 `Image` 和 `Video` Actions 会打开内置输入对话框。自定义上传器可以把完成后的数据直接交给 Action：

```tsx
<Image>
  {({ execute }) => (
    <ImageUploader
      onUploaded={({ src, alt, caption }) => execute({ src, alt, caption })}
    />
  )}
</Image>
```

## 剪贴板图片 {#clipboard-images}

完整预设包含 `ClipboardImages`。生产环境应通过对象存储解析粘贴和拖放的文件：

```tsx
<ClipboardImages
  resolveImage={async (file, { reportProgress, signal }) => {
    const uploaded = await uploadImage(file, {
      signal,
      onProgress: reportProgress,
    })
    return { alt: file.name, src: uploaded.url }
  }}
/>
```

## 编辑媒体 {#editing-media}

选中的图片支持调整尺寸、编辑说明、对齐，以及可见按钮或键盘删除。非图片剪贴板文件继续交由浏览器的默认行为处理。