47 lines
1.2 KiB
Plaintext
47 lines
1.2 KiB
Plaintext
|
---
|
||
|
|
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}
|
||
|
|
|
||
|
|
选中的图片支持调整尺寸、编辑说明、对齐，以及可见按钮或键盘删除。非图片剪贴板文件继续交由浏览器的默认行为处理。
|