腾讯开源项目tmagic-editor，可视化编辑器可拖拽生成手机或PC等项目

为了让大家更好的学习和上手可视化零代码平台的开发，今天就、和大家分享一款腾讯开源的可视化页面编辑器：tmagic-editor。

tmagic-editor 是什么？

tmagic-editor 是一个所见即所得的页面可视化编辑器，是从魔方平台演化而来的开源项目，意在提供一个供开发者快速搭建可视化搭建平台的解决方案。用户可以快速搭建可视化页面生产平台，让非技术人员可以通过拖拽和配置，自助生成H5页面、PC页面、TV页面，大大降低页面生产成本，实现零代码/低代码生成页面。

以下是腾讯视频会员业务基于 tmagic-editor 搭建的可视化页面搭建平台示意图。tmagic-editor 已经用于腾讯视频（会员频道、小企鹅、小说漫画等）、腾讯会议、腾讯新闻等十几个腾讯业务，每月生产和发布数百个页面。

平台特性：

所见即所得，体验友好的拖拽编辑方式。
丰富的拓展能力，支持业务方自定义组件、插件、扩展编辑器能力。
支持多种布局方式，tmagic-editor的容器概念，支持配置项目时，自由组合嵌套业务组件，提供超强的组件布局方式。
支持不同前端框架，使用编辑器的业务方可以采用自己熟悉的前端框架，来开发自己的业务组件，比如vue2、vue3、react。
强大的配置，支持表单联动的配置能力。
组件联动，支持组件通信、组件联动，允许页面内各组件提供丰富配置能力。
低代码，支持针对具体配置的页面写代码，修改页面样式属性等，提供除组件外的高级编码能力。

编辑器：

编辑器是可视化搭建平台的主要内容，其中包含以下内容：

编辑器：承载整个拖拽布局的页面，包含了下述的其他页面可见元素。
模拟器：居中位置渲染了当前页面配置的组件内容，模拟真实页面的展示内容。
组件库：左侧展示当前业务下的相关组件内容，包含tmagic-editor提供的基础组件和业务自定义组件。
组件树：左侧展示当前页面添加的组件内容，以树状结构展示。
代码块：左侧展示添加的函数，可供组件事件中联动所用，或者组件声明周期中调用。
数据源：左侧展示添加的数据源，用于组件中的各项配置。
表单配置：右侧表单项目，展示由组件内提供的配置描述，提供修改组件行为的配置项。
DSL 源码：右上角的📄图标可以展示当前页面，各个组件配置，页面基础配置组合而成的配置源码。

通过编辑器，可以创建、编辑、保存一个项目页面。

核心库：

@tmagic/editor 实现一个可视化编辑器。
@tmagic/form 实现组件在编辑器中自定义表单配置。
@tmagic/core 实现对组件进行跨框架管理与一些通用复杂逻辑的实现。
@tmagic/data-source 实现数据源的管理与编译。
@tmagic/stage 实现在编辑器中对组件的位置拖动与大小拖拉。
@tmagic/ui 提供一些vue3基础组件。
@tmagic/ui-vue2 提供一些vue2基础组件。
@tmagic/ui-react 提供一些react基础组件。
runtime 实现在编辑器中对使用不同框架的组件的渲染。

可以查阅 tmagic 的源代码，与文档描述内容可以逐一对应上，希望文档内容可以为开发者带来比较好的开发体验。

tmagic-editor能力项：

分类	功能	tmagic-editor
通用性	支持不同前端框架	支持，默认提供了vue2/vue3/react runtime
	支持流式布局	支持
	支持绝对定位布局	支持
	支持混合布局	支持
	支持固定定位	支持
扩展性	组件开发能力	支持
	插件开发能力	支持
	页面定制开发能力	支持，可以对配置的页面进行二次开发
	编辑器扩展能力	支持
基础能力	所见即所得可视化编辑	支持
	网格线	支持
	辅助对齐线	支持
	手机预览能力	支持，在pc端模拟
	组件cli生成工具	暂未提供
	低代码生成表单	支持，基于JS Schema配置生成表单
	本地开发与调试	支持
	组件间联动	支持
	组件生命周期code	支持
	多页面	支持
	abtest	支持
	组件树	支持
	组件修改状态标识	支持
	操作的undo-redo	支持
	历史版本与回滚	暂未提供，可以结合平台能力自行实现
	支持多平台渲染	支持
	打包速度	快
	打包体积	小
	页面加载体验	可以通过自定义runtime和ui实现优化
	导入psd	不支持
	编辑区放大缩小	支持
	组件出入场动画支持	不支持
	数据源管理	不支持
	下载页面源码	不支持
	下载海报图	不支持

基于可视化编辑器的页面生产流程：

一、物料开发，主要是指业务组件，比如图片组件、抽奖组件、登录插件等。tmagic-editor本身并不提供业务组件，业务组件由使用tmagic-editor的业务，根据自己的业务需求去自行开发。业务组件一次开发，在多个页面反复使用，业务组件应该提供一些配置选项，保证灵活性，满足不同页面使用该组件时的定制需求。业务组件可以用不同的前端框架实现，如vue2、vue3、react。

二、编排，这里指通过对组件的拖拽和配置，完成页面编辑，主要由非技术人员完成。

三、保存与发布，这个环节在技术实现上，分为生成DSL、构建、部署。

生成DSL：编辑器和生成的页面之间，通过DSL解耦。编辑器上配置页面，得到的产物是一个序列化js对象的页面描述文件，这个对象采用js schema描述，描述页面的基本信息、包含的组件信息、以及组件间逻辑。
构建：构建模块基于runtime代码，对组件进行打包构建，生成html、js、css文件。构建环节使用的runtime可以根据业务的需要，选择不同的前端框架实现，tmagic-editor默认提供了vue2、vue3、react三种runtime。
部署：将前面环节生成的html、js、css、js schema描述文件，部署到业务自己的服务器上。

使用tmagic-editor的业务需要做什么？

开发业务组件

tmagic-editor并不提供业务组件，业务需要根据自己的业务场景，开发相应的业务组件。比如抽奖组件、视频播放组件等。tmagic-editor的通用性设计，使得业务方可以使用不同的前端框架去开发组件。tmagic-editor官方已经提供了vue2/vue3、react的runtime，意味着业务可以直接使用这些框架开发组件，如果业务想用其它框架开发组件，则需要开发相应的runtime。

开发业务插件（可选）

插件的功能是作为页面逻辑行为的一种补充方式。一般不显式的在模拟器中被渲染出具体内容（除非插件中会生成组件并插入页面），通常我们会用插件实现类似登录，页面环境判断，请求拦截器等功能。跟组件一样，可以用不同前端框架实现。

部署可视化搭建服务

tmagic-editor提供的是开源代码，并不是一个saas服务，因此业务需要自己部署可视化搭建平台的服务。

构建和发布页面

业务需要管理自己的组件库，在发布环节基于拿到的页面js Schema描述文件，基于runtime进行打包构建，并把打包构建的产物部署到自己的服务器/CDN。

其它定制需求

如果对编辑器有一些扩展需求，编辑器已经预留了相应的扩展能力，业务可以开发相应扩展功能。tmagic-editor提供了vue2/vue3、react的runtime，业务可以修改runtime，或者开发其它前端框架的runtime。

如何使用 tmagic-editor？

安装与初始化

使用 tmagic-editor 非常简单，首先需要在项目中安装相关依赖。如果你的项目是基于 Vue3 的，可以通过 npm 或 yarn 进行安装：

npm install tmagic-editor

安装完成后，在项目中引入 tmagic-editor 并进行初始化：

import { createApp } from 'vue';import TmagicEditor from 'tmagic-editor';import 'tmagic-editor/dist/index.css'; const app = createApp(App);app.use(TmagicEditor);app.mount('#app');

基本使用方法

在项目中引入 tmagic-editor 后，就可以在页面中使用它了。在 Vue 组件中，可以通过以下方式使用 tmagic-editor：

<template> <tmagic-editor :config="editorConfig" @save="handleSave"></tmagic-editor> </template> <script setup>import { ref } from 'vue'; const editorConfig = ref({ // 配置项}); const handleSave = (data) => { console.log('保存的数据:', data);};</script>

插件开发

tmagic-editor 还支持插件开发，通过插件可以拓展编辑器的功能。例如，开发一个导出 PDF 的插件：

import { definePlugin } from 'tmagic-editor'; export default definePlugin({ name: 'export-pdf', setup(editor) { editor.on('save', (data) => { // 导出PDF逻辑 }); }}); // 注册插件import ExportPDFPlugin from './ExportPDFPlugin.js'; const editorConfig = ref({ plugins: [ExportPDFPlugin]});

当然还有更多能力大家可以自行探索挖掘。