配置 extensionsOptions.image 与 attachment 的 onUpload、proxyUrl，并处理上传失败通知。

图片与附件

SVeditor 支持可缩放图片与附件卡片（文件名、大小、下载链接）。二者都通过 extensionsOptions 接入你的存储服务：SDK 负责工具栏、粘贴、拖拽与节点渲染，上传与鉴权由宿主实现。

典型接入步骤：

实现 onUpload，把 File 传到对象存储或自有 API，返回节点所需字段。
（可选）设置 proxyUrl，让文档里只存相对路径，展示时拼接 CDN。
（可选）配置 extensionsOptions.notifications，统一失败 toast。

在 Next.js 项目中接入

1. 图片上传

import type { ImageOptions } from "@wztlink1013/sveditor";

const imageOptions: ImageOptions = {
  proxyUrl: "https://cdn.example.com",
  onUpload: async (file, onProgress) => {
    onProgress?.({ progress: 10 });

    const signed = await fetch("/api/upload/image/signed-url", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        filename: file.name,
        contentType: file.type,
      }),
    });

    if (!signed.ok) {
      throw new Error("Failed to get signed URL");
    }

    const { uploadUrl, publicPath } = await signed.json();

    await uploadWithProgress(uploadUrl, file, (p) =>
      onProgress?.({ progress: p }),
    );

    return {
      src: publicPath,
      alt: file.name.replace(/\.[^/.]+$/, ""),
      title: file.name,
      width: 1200,
      height: 800,
      "data-keep-ratio": true,
    };
  },
};

SVeditor.create({
  el: "#editor",
  extensionsOptions: { image: imageOptions },
});

onUpload 必须 resolve 为图片 HTML 属性，或 throw 以触发失败通知。不要吞掉错误。

2. 附件上传

import type { AttachmentOptions } from "@wztlink1013/sveditor";

const attachmentOptions: AttachmentOptions = {
  onUpload: async (file, onProgress) => {
    onProgress?.({ progress: 50 });
    const { url } = await uploadFileToStorage(file);
    onProgress?.({ progress: 100 });

    return {
      src: url,
      name: file.name,
      size: file.size,
      type: file.type || "application/octet-stream",
    };
  },
};

SVeditor.create({
  el: "#editor",
  extensionsOptions: { attachment: attachmentOptions },
});

3. 在 React 中组合

const options = useMemo(
  () => ({
    extensionsOptions: {
      image: { onUpload: uploadImage, proxyUrl: CDN_ROOT },
      attachment: { onUpload: uploadAttachment },
      autoSave: { onSaveContent: saveBody },
    },
  }),
  [docId],
);

return <SveditorMount options={options} />;

在线示例见 Playground。

参数配置

`extensionsOptions.image`

interface ImageOptions {
  proxyUrl?: string;
  onUpload?: (
    file: File,
    onProgress?: (progress: { progress: number }) => void,
  ) => Promise<ResizableImageHTMLAttributes>;
}

参数	什么时候用	说明
`onUpload`	用户插入 / 粘贴 / 拖拽图片	返回 `src`、`width`、`height` 等；`src` 可为存储 key（配合 `proxyUrl`）
`proxyUrl`	CDN 域名与存库路径分离	展示时拼接在 `src` 前；勿带末尾 `/` 不一致问题

常用返回字段：

字段	说明
`src`	必填，图片地址或存储 key
`width` / `height`	初始尺寸，默认约 200×200
`data-keep-ratio`	建议 `true`，缩放保持比例
`alt` / `title`	无障碍与悬停

`extensionsOptions.attachment`

interface AttachmentOptions {
  proxyUrl?: string;
  onUpload?: (
    file: File,
    onProgress?: (progress: { progress: number }) => void,
  ) => Promise<AttachmentHTMLAttributes>;
}