跳到主要内容

Ydesign Button

用一行脚本，把完整编辑器以弹窗形式嵌进任意网站。

结果
Loading...
实时编辑器
function Demo() {
  const [preview, setPreview] = React.useState(null);

  const open = () => {
    openYdesignEditor({
      key: 'DEMO_API_KEY',
      sections: ['templates', 'photos', 'text', 'shapes', 'upload', 'background', 'layers', 'size'],
      defaultSection: 'photos',
      publishLabel: '完成',
      onPublish: ({ dataURL, json }) => {
        setPreview(dataURL);
        console.log('[ydesign] json', json);
      },
    });
  };

  return (
    <div style={{ textAlign: 'center' }}>
      <button className="button button--primary" onClick={open}>
        打开 Ydesign 编辑器
      </button>
      {preview && (
        <img
          src={preview}
          alt="export preview"
          style={{ display: 'block', margin: '16px auto 0', maxHeight: 200 }}
        />
      )}
    </div>
  );
}

上方是可编辑的 Live Playground：改 sections / publishLabel 等配置后点按钮即可体验。
Studio 默认：https://yitu-design.com/studio。本地联调先起 demo-iframe，再起 demo-button，并传 url: 'http://localhost:5174/studio/'。

为什么用 Ydesign Button？​

  1. 零构建接入：一行 <script>，不依赖 React / Vue / 打包工具
  2. 样式隔离：编辑器跑在 iframe 里，不污染主站 CSS
  3. 按需加载：用户不点按钮，编辑器不会加载
  4. 结果回传：点击「完成」后，通过 onPublish 拿到图片和 JSON

如何接入？​

  1. 引入脚本：
<script src="https://static.yitu-design.com/button-v1.js"></script>
  1. 放一个按钮：
<button id="open-ydesign">打开编辑器</button>
  1. 绑定点击事件：
document.getElementById('open-ydesign').addEventListener('click', () => {
  window.createYdesignEditor({
    key: 'YOUR_API_KEY',
    onPublish: ({ dataURL, json }) => {
      // dataURL：导出 PNG（可直接给 <img src>）
      // json：设计稿数据，可存服务端供下次编辑
    },
  });
});

配置项​

在 Live Playground 里改配置即可试效果；完整选项如下：

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',

  // 初始数据：jsonUrl 或 json 二选一
  // jsonUrl: 'https://example.com/template.json',
  // json: { /* 设计稿 JSON */ },

  publishLabel: '保存设计',

  onPublish: ({ dataURL, json }) => {
    document.getElementById('result').src = dataURL;
  },
  // 任意编辑都会触发（可用于自动保存）
  onChange: ({ json }) => {
    console.log(json);
  },

  // 预置到「上传」面板的素材
  uploads: [
    {
      url: 'https://example.com/image.jpg',
      preview: 'https://example.com/image-thumb.jpg',
    },
  ],

  // 多语言
  translations: {
    sidePanel: {
      templates: '模板',
      photos: '图片',
      text: '文字',
      shapes: '形状',
    },
  },
});

React / Vue 用法与上面一致：在 useEffect / onMounted 里加载同一份脚本，再调用 window.createYdesignEditor。

和其他集成方式的区别​

集成方式学习成本定制深度主站框架
Ydesign Button（本文）低中（参数配置）无
无框架集成中中高无
@ydesign/react-editor中最高React
@ydesign/vue-editor中最高Vue 3