跳到主要内容

集成方式总览

ydesign 的目标不是绑定某一个前端框架，而是让任何技术栈的项目都能轻松嵌入一个画布编辑器。围绕这个目标，我们将整个生态拆成了几个互相独立、可自由组合的包：

生态包划分​

@ydesign/core        →  画布渲染核心（纯 TS，零 UI 依赖）
      │
      ├─────────────────────────┬─────────────────────────┐
      ▼                         ▼                         ▼
@ydesign/react-editor           @ydesign/vue-editor              （你自己的 UI）
React 版 UI 层          Vue 版 UI 层（规划中）
  • @ydesign/core —— 画布渲染核心，封装 fabric.js v6，所有业务能力以 Handler 形式暴露。零 UI 框架依赖，任何技术栈都能直接用。详见 概览。
  • @ydesign/react-editor —— 基于 React 18 + Ant Design v6 + MobX + mobx-state-tree 的官方 UI 层。即你当前看到的 @ydesign/react-editor。
  • @ydesign/vue-editor —— 基于 Vue 3 的官方 UI 层。规划中，将在 core 与 React 版稳定后发布。
  • 自己的 UI —— 如果你不使用 React / Vue，也完全可以直接基于 @ydesign/core 做自己的界面。

💡 你不需要把整套生态都装上。按项目需要挑几个即可。

应该选择哪种集成方式？​

你的场景推荐方式文档
React 项目，想要完整的编辑器 UI直接安装 @ydesign/react-editor概览
Vue 项目，想要完整的编辑器 UI@ydesign/vue-editor（即将发布）Vue 集成
纯 HTML 页面，不想配置构建工具通过 <script> 引入 UMD 包无框架集成
Angular / Svelte / Solid / 原生 JS 项目把编辑器单独打包，以全局方法方式调用非 React 项目集成
只想在网站上放一个"打开编辑器"的按钮用 Ydesign Button 嵌入式弹窗Ydesign Button
自研 UI / 只需要画布能力直接依赖 @ydesign/core概览 · Headless 示例

一张图看懂​

╭────────────────────────────────────────────────────────────────╮
│  ① 最轻量 —— Ydesign Button（一行 <script>，iframe 弹窗）       │
│     适合：营销站、博客、电商详情页                               │
│                                                                │
│  ② 轻量集成 —— Frameworkless（CDN <script>，全局 API）          │
│     适合：没有构建工具、想嵌入到现有页面                          │
│                                                                │
│  ③ 原生集成 —— @ydesign/react-editor / @ydesign/vue-editor                   │
│     适合：全站就是一个编辑器应用                                 │
│                                                                │
│  ④ 跨框架集成 —— Non-React Integration                         │
│     适合：主站是 Vue / Angular，但想用 React 版 UI              │
│                                                                │
│  ⑤ Headless —— 只用 @ydesign/core                              │
│     适合：UI 完全自研，只复用画布能力                            │
╰────────────────────────────────────────────────────────────────╯

接下来每一节会分别介绍对应的集成步骤与注意事项。