如何 3 分钟体验 TMagic Editor拖拽搭建可视化编辑器指南【免费下载链接】tmagic-editor项目地址: https://gitcode.com/GitHub_Trending/tm/tmagic-editor想给团队做一个拖拽式页面搭建工具绕不开一堆细节画布上怎么拖动组件、选中框怎么画、缩放手势怎么接、撤销重做怎么存状态、右侧属性面板怎么渲染……这些基础能力每一样都要做做对还要花不少时间。TMagic Editor 就是为这件事准备的可视化编辑器方案它把拖拽、选中、缩放、撤销、属性面板、数据源和代码块这些部分都内置好了你只需要关心自己的业务组件。项目名片TMagic Editor 是什么TMagic Editortmagic-editor源自腾讯魔方平台目标是给开发者一套快速搭建可视化搭建平台的解决方案你写业务组件编辑器负责其余部分。核心能力按 npm 包拆分每个包对应一个你平时要自己造的轮子tmagic/editor编辑器主包Vue 3 Composition API、TypeScript 编写包含拖拽编辑、画布模拟器、组件库、组件树、属性面板、数据源、代码块和 DSL 源码查看用 element-plus 系 UI 时配tmagic/element-plus-adapter适配器接入。tmagic/form业务组件导出一份 JS 表单描述编辑器右侧就渲染出对应的配置项表单支持字段间用函数写联动逻辑配置项不用一个个手写控件。tmagic/data-source在编辑器里管理静态数据与 HTTP 接口数据组件表单可以直接绑定某个数据源的字段。tmagic/core组件跨框架管理与通用逻辑配合 runtime 让 Vue 2 / Vue 3 / React 写的组件都跑在同一套事件与生命周期机制里。编辑器与渲染解耦tmagic/editor只产出一份 DSL 配置把它渲染成页面是 runtime 的事仓库自带 vue2 / vue3 / react 三个版本的 runtime 示例画布里和发布后的页面都靠它。三步跑通一个可视化编辑器1. 准备环境与依赖环境要求来自仓库 READMEnode^20.19.0 || 22.12.0包管理器 pnpm。只想先跑示例看效果克隆仓库后pnpm bootstrap安装依赖再执行pnpm playground浏览器打开 http://localhost:8098/tmagic-editor/playground/ 就是一个完整示例工程。在自己的项目里用则装这三个包npm install tmagic/editor tmagic/element-plus-adapter element-plus2. 在入口文件注册编辑器组件按 hello-world 教程把下面代码覆盖到src/main.ts仓库文档示例使用 TSimport element-plus/dist/index.css; import tmagic/editor/dist/style.css; import { createApp } from vue; import ElementPlus from element-plus; import TMagicEditor from tmagic/editor; import TMagicElementPlusAdapter from tmagic/element-plus-adapter; import App from ./App.vue; createApp(App).use(ElementPlus).use(TMagicEditor, TMagicElementPlusAdapter).mount(#app);3. 给 m-editor 配三个关键属性template m-editor v-modelvalue :component-group-listcomponentGroupList :props-configspropsConfigs / /template script setup import { ref } from vue; const value ref({ type: app, id: 1, items: [] }); const componentGroupList ref([]); const propsConfigs {}; /script三个属性各管一件事v-model绑定 DSL初始值必须带type: app、id和items否则新建页面会没反应component-group-list是左侧组件库每项的type要和 runtime 里注册的组件对得上props-configs是各组件 type 对应的属性表单键名必须和组件 type 一致。画布渲染要二选一配置:render自己写渲染函数或runtime-url指向 runtime 构建出的 html官方推荐后者因为渲染逻辑与编辑器解耦。跑起来后你会看到组件库、组件树、画布模拟器和右侧属性面板齐活具体字段写法可对照 hello-world 教程 逐段补齐。功能拆解数据源、表单配置与代码块配置数据源让页面接上真实数据编辑器左侧面板可以添加基础数据源静态数据和 HTTP 数据源配 url、query、body、header 调接口。新增时在数据源面板里配置属性字段字段名与类型会存进 DSL。组件侧通过表单字段类型来取数data-source-input提供数据源模板输入、data-source-field-select按字段选择、data-source-select选择整个数据源、data-source-method-select选择数据源方法。在组件的formConfig里声明[{ type: data-source-select }];静态数据源可用dataSource.setData更新HTTP 数据源可调dataSource.request()刷新再挂到组件事件上静态数据、接口响应、页面展示之间就形成完整链路。用表单配置驱动右侧属性面板tmagic/form 用 JS Schema 描述表单描述里能直接写函数字段 A 变化时改字段 B 的联动逻辑不用绕路。字段类型覆盖文本、数字、单选、复选、下拉、日期时间、颜色等还能row横排、fieldset分组。表单渲染器会统一给所有组件补上基础样式和钩子事件配置业务方只需要声明自己独有的项。适合配置复杂的业务组件把这个组件有哪些可调参数写成一份配置编辑器替你渲染成可交互、可联动的表单。写代码块把逻辑干预交给非前端代码块是 TMagic Editor 的低代码能力左侧代码块面板里支持在线编辑、参数定义含类型、参数注释、自动保存草稿。代码块存放在 DSL 的codeBlocks里与 app 同层级同一活动的不同页面都能引用组件通过 created / mounted 两个钩子把代码块绑到自己身上运行时以{ app, params }形式传入执行。适用于活动页需要临时改一段交互逻辑、但又不想发版的场景。避坑指南三个高频问题的排查路径⚠️组件选中了却拖不动原因多为渲染完成后没有通知编辑器画布已更新——render方案里要在 iframe 加载后调用onPageElUpdate(root)和onRuntimeReady({})并且组件 DOM 上要有data-tmagic-id默认用节点 id标记。另一个常见原因是moveable-options回调把draggable/resizable设成了 false回调支持按节点 type 判断检查它是否误伤了目标组件。画布一片空白先确认runtime-url指向的页面存在且可访问画布就是一个 iframeruntime-url就是它的 src再确认初始 DSL 带了id和items否则新增页面点了没反应若走render方案确认返回的 DOM 里真的渲染出了组件。属性面板不显示多半是对应组件 type 的键没配在propsConfigs里或表单字段描述不符合 tmagic/form 的规范拿到配置后还会经过propsService.fillConfig()补公共项动态场景可用propsService.setPropsConfigs()直接写入。下一步文档、示例工程与源码入口完整概念与编辑器结构说明docs/guide/introduction.md手把手教程含 render 完整写法docs/guide/tutorial/hello-world.md编辑器主包源码packages/editor/src/可直接跑的示例工程playground/画布与线上页面参考 runtime/vue/ 和 runtime/react/用npm create tmagiclatest/pnpm create tmagic可以快速生成 runtime 模板按提示选 runtime 即可【免费下载链接】tmagic-editor项目地址: https://gitcode.com/GitHub_Trending/tm/tmagic-editor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考