先动手,再理解
交互体验覆盖基础画布、小地图、思维导图、内容表格、画笔和钢笔。画布工具栏提供撤销、重做、缩放和全屏。提供预设的场景可在体验区切换,修改仅保留在当前页面。
双击节点编辑文字,拖动组织内容。下面运行的是基础公开 SDK,修改仅保留在页面内。
免费体验,点击后加载;修改只保留在当前页面。
从体验到接入
进入演练场后,点击示例标题左侧的「展开示例侧栏」,选择要编辑的示例。编辑区支持 JS 和 TS 高亮、源码搜索与折叠。在两种语言模式下开启「类型检查」,都可以使用 SDK 成员补全和类型诊断。
在源码编辑区按 Ctrl+S(macOS 为 ⌘+S)或点击「运行」可以更新预览,也可开启自动运行。文件名旁的圆点表示有修改待运行,成功更新预览后消失。编译或初始化失败时会保留上次成功的预览,运行日志可在 Console 查看。离开示例或刷新页面会丢弃源码修改。
文档中的交互演示使用 /demo/<示例 ID>/,可以在文档里操作,也可以单独打开同一个演示。代码演练从顶栏「演练场」进入,使用 /playground/?example=<示例 ID> 直达指定示例。表格的两种预设共用初始化源码,演练场中切换示例会自动运行。
代码示例通过 mount(container, onDispose, addTool, preview) 接收预览环境。第三个参数 addTool() 注册自定义按钮,第四个参数 preview 通过 configure() 设置选区工具栏(selectionToolbar)、底部视口工具栏(viewportToolbar)和小地图(minimap)。初始化和运行期间均可调用,每次只更新传入的字段。小地图由示例装配插件,面板可通过底部工具栏开关。
演练场运行真实 SDK,支持静态导入内置 SkyNote 包。基础画布和自定义节点复用文档示例的初始化代码,小地图示例装配插件并使用演练场的共用面板。同步或异步的 mount() 可以返回编辑器或清理函数,额外订阅与计时器可通过 onDispose() 注册清理。
编辑区支持单文件 JS 和 TS。模块导入限于内置包,DOM 预览无法保证强制终止死循环。
- 快速开始:自包含的基础画布与纯TypeScript挂载入口。
- Vue接入:实际运行的单文件组件,包含客户端加载与卸载清理。
- 保存与恢复:先在页面内试保存,再接入自己的浏览器存储。
- 自定义节点:定义、注册并运行带业务状态的灵感卡片。
继续探索
| 示例 | 体验重点 |
|---|---|
| 思维导图 | 结构切换、分支折叠与主题编辑 |
| 内容表格 | 行列调整、单元格编辑与框线样式 |
| 画笔 | 自由绘制、压感笔触与笔迹样式 |
| 钢笔 | 路径绘制、曲线控制柄与锚点编辑 |
| 小地图 | 概览数据与宿主导航接入 |
高级插件体验服务
高级插件由独立宿主按需加载。站点维护者设置 VITE_SKYNOTE_DEMO_URL 指向已确认可公开体验的宿主地址,即可在介绍页内嵌对应演示。
完整研发工作区本地只启动文档站即可,服务自动挂载同端口的 /playground/ 并支持热更新;独立体验服务仍可单独使用,配置见 .env.example。配置会进入公开页面,不应包含密钥、私网服务或用户数据。没有配置时,介绍页明确显示体验服务未连接,基础画布仍可独立运行。
公开部署前还需确认演示宿主的域名、嵌入策略与高级插件产物开放范围。本站不会自动发布任何网站或插件包。
体验入口会等待宿主确认插件就绪,连接超时、服务未开放或加载失败时提供重试。维护者应配套更新文档站与独立体验应用;自定义宿主的就绪协议见文档站仓库README。
完整工作区可通过pnpm docs:build将文档与体验联合构建为同一个静态站点,体验位于/playground/,无需单独在线Web服务。部署说明见文档站仓库README。