Ydesign Button

Ydesign Button 是一段极小的独立脚本，通过 iframe 的形式把整个编辑器以"弹窗"形式嵌入到任何网站上。一个简单的按钮，就能让你的产品立刻拥有一个功能完整的在线设计工具，像这样：

它解决了什么问题？

日常开发里经常有这样的场景：

公司官网的活动页想让用户在线做一张海报分享，但主站技术栈不是 React
电商详情页想让买家自助设计印在商品上的图案
博客 / CMS 里想加一个轻量的插图工具

这些场景有一个共同点：编辑器只是辅助功能，不值得为它引入整条前端工具链。

Ydesign Button 就是为此而生 —— 它几乎没有集成成本：

✅ 不需要 npm / 构建工具：一行 <script> 就完成接入
✅ 不需要懂 React / Vue：完全技术栈无关
✅ 不污染主站样式：编辑器跑在 iframe 里，CSS 完全隔离
✅ 首屏零开销：用户不点按钮，编辑器一字节都不会加载
✅ 操作完成回传结果：点击"完成"后，通过回调把图片 / JSON 交给主站

接入步骤

1. 引入 Ydesign Button 脚本

放在 HTML 任意位置（推荐 <body> 末尾）：

<script src="https://embed.ydesign.com/button-v1.js"></script>

2. 在页面里放一个按钮

<button id="open-ydesign">打开编辑器</button>

3. 绑定点击事件

const btn = document.getElementById('open-ydesign');
btn.addEventListener('click', () => {
  window.createYdesignEditor({
    key: 'YOUR_API_KEY',
    onPublish: ({ dataURL, json }) => {
      // 用户点击"完成"后会回调
      // dataURL：导出的图片（base64 PNG，可直接给 <img src>）
      // json：设计稿的 JSON 数据，可保存到服务器用于下次编辑
      console.log('导出图片:', dataURL);
      console.log('设计稿数据:', json);
    },
  });
});

Demo

点击下方按钮体验：

完整参数

window.createYdesignEditor 支持一系列配置项，覆盖绝大多数业务需要：

function inchesToPx(inches) {
  const dpi = 72;
  return inches * dpi;
}

window.createYdesignEditor({
  /** —— 基础 —— */
  key: 'YOUR_API_KEY',

  /** —— 画布初始尺寸 —— */
  width: inchesToPx(20),
  height: inchesToPx(10),

  /** —— 侧边面板裁剪 —— */
  // 只显示这些面板，不传则显示全部
  sections: ['templates', 'photos', 'text', 'shapes', 'upload', 'background', 'layers', 'size'],
  // 初始展开的面板
  defaultSection: 'photos',

  /** —— 初始数据加载 —— */
  // 方式 A：从远程 URL 加载 JSON
  jsonUrl: 'https://api.ydesign.com/templates/demo.json',
  // 方式 B：直接传入 JSON 对象
  // json: { /* 你的设计稿 JSON */ },

  /** —— 按钮文案 —— */
  publishLabel: '保存设计',

  /** —— 回调 —— */
  // 点击"完成/发布"按钮触发
  onPublish: ({ dataURL, json }) => {
    document.getElementById('result').src = dataURL;
    // 你也可以把 json 上传到服务器，下次打开用 jsonUrl 恢复
    fetch('/api/designs', {
      method: 'POST',
      body: JSON.stringify({ json }),
    });
  },
  // 任意一次编辑都会触发（可用于自动保存）
  onChange: ({ json }) => {
    console.log('用户修改了设计稿', json);
  },

  /** —— 预置用户素材 —— */
  // 打开时出现在"上传"面板里的素材列表
  uploads: [
    {
      url: 'https://example.com/image.jpg',
      preview: 'https://example.com/image-thumb.jpg',
    },
  ],

  /** —— 多语言 —— */
  // 与 setTranslations 的格式完全一致
  translations: {
    sidePanel: {
      templates: '模板',
      photos: '图片',
      text: '文字',
      shapes: '形状',
      upload: '上传',
      background: '背景',
      layers: '图层',
      size: '尺寸',
    },
    toolbar: {
      undo: '撤销',
      redo: '重做',
    },
  },

  /** —— 动画能力（默认关闭）—— */
  animationsEnabled: false,
});

典型集成示例

电商商品自定义（原生 HTML）

<!DOCTYPE html>
<html lang="zh-CN">
  <body>
    <img id="preview" style="width: 300px" />
    <button id="customize">自定义我的 T 恤设计</button>

    <script src="https://embed.ydesign.com/button-v1.js"></script>
    <script>
      const btn = document.getElementById('customize');
      const preview = document.getElementById('preview');

      btn.addEventListener('click', () => {
        window.createYdesignEditor({
          key: 'YOUR_API_KEY',
          width: 600,
          height: 800,
          // 只保留用户真正需要的面板
          sections: ['photos', 'text', 'shapes', 'upload'],
          publishLabel: '完成设计',
          onPublish: ({ dataURL }) => {
            preview.src = dataURL;
            // 同时可以把 dataURL 发到订单系统
          },
        });
      });
    </script>
  </body>
</html>

在 Vue 3 中使用

<template>
  <button @click="openEditor">设计我的封面</button>
  <img v-if="resultUrl" :src="resultUrl" />
</template>

<script setup>
import { onMounted, ref } from 'vue';

const resultUrl = ref('');

onMounted(() => {
  // 脚本只需加载一次
  if (!document.getElementById('ydesign-btn')) {
    const s = document.createElement('script');
    s.id = 'ydesign-btn';
    s.src = 'https://embed.ydesign.com/button-v1.js';
    document.body.appendChild(s);
  }
});

function openEditor() {
  window.createYdesignEditor({
    key: import.meta.env.VITE_YDESIGN_KEY,
    onPublish: ({ dataURL }) => {
      resultUrl.value = dataURL;
    },
  });
}
</script>

在 React 中使用

直接把 <script> 写在 useEffect 里，用法与原生 HTML 完全一致（本页上方的 Demo 按钮就是这样实现的）。

和其他集成方式的区别

集成方式	学习成本	定制深度	主站框架限制	打包体积
Ydesign Button（本文）	⭐	中（通过参数配置）	无	0（按需加载）
无框架集成	⭐⭐	中高	无	~700KB gzipped
非 React 项目集成	⭐⭐⭐	高	需要 React 知识	自己控制
`@ydesign/react-editor`	⭐⭐	最高	React	可 tree-shaking
`@ydesign/vue-editor`	⭐⭐	最高	Vue 3	可 tree-shaking

常见问题

Q：用户数据会经过 Ydesign 的服务器吗？ A：不会。编辑器运行在 iframe 里，所有编辑过程都在用户浏览器本地完成。只有当用户点击"完成"时，结果才通过 onPublish 回调到你的主站，由你决定是存本地还是传服务器。

Q：可以同时在一个页面开多个编辑器实例吗？ A：不推荐。Button 方案的设计初衷就是"弹窗式"一次只开一个。同一页面多个编辑器，请使用 @ydesign/react-editor 直接集成。

Q：key 必须要有吗？ A：开发 Demo 阶段可以省略（会自动用社区版配置）。正式上线需要申请一个 API key，用于访问字体库 / 模板 / AI 能力等后端服务。

它解决了什么问题？​

接入步骤​

1. 引入 Ydesign Button 脚本​

2. 在页面里放一个按钮​

3. 绑定点击事件​

Demo​

完整参数​

典型集成示例​

电商商品自定义（原生 HTML）​

在 Vue 3 中使用​

在 React 中使用​

和其他集成方式的区别​

常见问题​