绵阳市城市建设档案馆网站,网站建设时间及简介,济南快速排名,重庆最新重大新闻hi, 大家好, 我是徐小夕. 之前一直在社区分享零代码低代码的技术实践#xff0c;也陆陆续续设计并开发了多款可视化搭建产品#xff0c;比如#xff1a; H5-Dooring#xff08;页面可视化搭建平台#xff09;V6.Dooring#xff08;可视化大屏搭建平台#xff09;F… hi, 大家好, 我是徐小夕. 之前一直在社区分享零代码低代码的技术实践也陆陆续续设计并开发了多款可视化搭建产品比如 H5-Dooring页面可视化搭建平台V6.Dooring可视化大屏搭建平台Flowmix/Docx 多模态文档编辑器: 让文档不止于文档 最近也一直在研究可视化搭建 AI相关的技术实践, 为了让大家更好的学习和上手可视化零代码平台的开发今天就和大家分享一款开源的可视化页面编辑器——tmagic-editor。 github地址https://github.com/Tencent/tmagic-editor 一、tmagic-editor 是什么 tmagic-editor 是一款基于 Vue3 的 Web 页面可视化编辑器工具它的出现为前端开发带来了全新的思路和方法。以往开发者在构建页面时往往需要花费大量时间在繁琐的代码编写和页面布局调整上而 tmagic-editor 通过提供友好的拖拽编辑方式让这一过程变得轻松简单。 上面是它的原理流程图无论是经验丰富的资深开发者还是刚入门的新手都能通过这套模式轻松上手开发可视化编辑器。 它和我之前研发的零代码平台 H5-Dooring 有点类似都是通过可视化拖拽和配置式来生成页面接下来我就和大家详细介绍一下这款开源项目并提供一个代码案例帮助大家更快的上手和掌握它。 二、核心特性解析 2.1 友好的拖拽编辑方式 tmagic-editor 的拖拽编辑功能和 H5-Dooring 类似支持自由布局。开发者只需通过简单的鼠标操作将所需的组件从组件库中拖拽到页面编辑区域即可完成组件的添加。 同时还可以对组件进行自由的布局调整、样式修改等操作就像在使用一款专业的图形设计软件一样。这种直观的操作方式极大地降低了开发门槛提高了开发效率。例如在创建一个电商产品展示页面时开发者可以直接拖拽商品图片组件、价格组件、描述组件等快速搭建出页面框架然后再根据需求进行细节调整整个过程可能只需要几分钟而传统的开发方式可能需要花费数小时甚至更长时间。 2.2 丰富的自定义组件和插件 为了满足不同项目的多样化需求tmagic-editor 支持丰富的自定义组件和插件。开发者可以根据项目特点自行开发或引入第三方的组件和插件拓展编辑器的功能。这意味着无论你是在开发企业级应用、电商平台还是社交类网站都能找到适合自己项目的组件和插件实现个性化的页面构建。比如在开发一个在线教育平台时开发者可以引入自定义的课程视频播放组件、在线测试组件等为用户提供更加丰富的学习体验。 2.3 强大的配置能力 tmagic-editor 具备强大的配置能力开发者可以通过配置文件对编辑器进行全方位的定制。从组件的属性设置、事件绑定到页面的布局方式、交互效果都可以通过配置文件进行灵活调整。这种配置化的开发方式不仅提高了开发效率还使得代码的可维护性大大增强。例如在开发一个多语言版本的网站时开发者可以通过配置文件轻松切换不同语言的文本内容而无需修改大量的代码。 2.4 支持 element-plus、tdesign-vue-next 等 UI 组件库并可扩展 在 UI 组件库方面tmagic-editor 同样表现出色。它支持 element-plus、tdesign-vue-next 等流行的 UI 组件库为开发者提供了丰富的组件选择。 同时tmagic-editor 还具备良好的扩展性开发者可以根据项目需求轻松引入其他 UI 组件库。这使得开发者在构建页面时能够根据项目的风格和需求选择最合适的 UI 组件打造出美观、易用的 Web 页面。 例如在开发一个简约风格的管理后台时开发者可以选择 element-plus 的组件快速搭建出简洁明了的页面而在开发一个时尚的电商平台时tdesign-vue-next 的组件则能为页面增添更多时尚元素。 2.5. 支持移动、PC 布局 随着移动互联网的发展响应式设计变得越来越重要。tmagic-editor 充分考虑到这一点它支持移动、PC 布局开发者可以通过简单的切换实现同一页面在不同设备上的完美展示。无论是在手机、平板还是电脑上用户都能获得一致的良好体验。例如在开发一个新闻资讯类应用时开发者可以使用 tmagic-editor 轻松创建适应不同设备的页面布局让用户在手机上能够方便地浏览新闻内容在电脑上则能获得更丰富的信息展示。 三、如何使用 tmagic-editor 3.1 安装与初始化 使用 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); 3.2 基本使用方法 在项目中引入 tmagic-editor 后就可以在页面中使用它了。在 Vue 组件中可以通过以下方式使用 tmagic-editor templatetmagic-editor :configeditorConfig savehandleSave/tmagic-editor
/templatescript setup
import { ref } from vue;const editorConfig ref({// 配置项
});const handleSave (data) {console.log(保存的数据:, data);
};
/script 3.3 插件开发 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]
}); 当然还有更多能力大家可以自行探索挖掘。 最近我们H5-Dooring零代码编辑器也在持续更新目前已支持多布局模式和页面权限控制能力组件商店以及数据埋点分析等功能 大家感兴趣也可以参考体验一下 https://dooring.vip 后期还会持续迭代更新H5-Dooring以及最新的进展欢迎大家交流反馈如果你也有好的想法或者产品欢迎在留言区交流~ 往期精彩 零代码AI的阶段性复盘文档引擎AI可视化打造下一代文档编辑器爆肝1000小时, Dooring零代码搭建平台3.5正式上线从零打造一款基于Nextjsantd5.0的中后台管理系
