tmagic-editor，騰訊開源的基于Vue3的頁(yè)面可視化編輯器

軟件 PRO 稿源：趣談前端 2025-02-18 08:04

tmagic-editor?是一款基于 Vue3 的 Web 頁(yè)面可視化編輯器工具，它的出現(xiàn)為前端開發(fā)帶來(lái)了全新的思路和方法。以往，開發(fā)者在構(gòu)建頁(yè)面時(shí)，往往需要花費(fèi)大量時(shí)間在繁瑣的代碼編寫和頁(yè)面布局調(diào)整上，而?tmagic-editor?通過提供友好的拖拽編輯方式，讓這一過程變得輕松簡(jiǎn)單。

?上面是它的原理流程圖，無(wú)論是經(jīng)驗(yàn)豐富的資深開發(fā)者，還是剛?cè)腴T的新手，都能通過這套模式輕松上手開發(fā)可視化編輯器。

它和我之前研發(fā)的零代碼平臺(tái)?H5-Dooring?有點(diǎn)類似，都是通過可視化拖拽和配置式來(lái)生成頁(yè)面，接下來(lái)我就和大家詳細(xì)介紹一下這款開源項(xiàng)目，并提供一個(gè)代碼案例，幫助大家更快的上手和掌握它。

核心特性解析

友好的拖拽編輯方式

tmagic-editor?的拖拽編輯功能和?H5-Dooring?類似，支持自由布局。開發(fā)者只需通過簡(jiǎn)單的鼠標(biāo)操作，將所需的組件從組件庫(kù)中拖拽到頁(yè)面編輯區(qū)域，即可完成組件的添加。

同時(shí)，還可以對(duì)組件進(jìn)行自由的布局調(diào)整、樣式修改等操作，就像在使用一款專業(yè)的圖形設(shè)計(jì)軟件一樣。這種直觀的操作方式，極大地降低了開發(fā)門檻，提高了開發(fā)效率。例如，在創(chuàng)建一個(gè)電商產(chǎn)品展示頁(yè)面時(shí)，開發(fā)者可以直接拖拽商品圖片組件、價(jià)格組件、描述組件等，快速搭建出頁(yè)面框架，然后再根據(jù)需求進(jìn)行細(xì)節(jié)調(diào)整，整個(gè)過程可能只需要幾分鐘，而傳統(tǒng)的開發(fā)方式可能需要花費(fèi)數(shù)小時(shí)甚至更長(zhǎng)時(shí)間。

豐富的自定義組件和插件

為了滿足不同項(xiàng)目的多樣化需求，tmagic-editor?支持豐富的自定義組件和插件。開發(fā)者可以根據(jù)項(xiàng)目特點(diǎn)，自行開發(fā)或引入第三方的組件和插件，拓展編輯器的功能。這意味著，無(wú)論你是在開發(fā)企業(yè)級(jí)應(yīng)用、電商平臺(tái)還是社交類網(wǎng)站，都能找到適合自己項(xiàng)目的組件和插件，實(shí)現(xiàn)個(gè)性化的頁(yè)面構(gòu)建。比如，在開發(fā)一個(gè)在線教育平臺(tái)時(shí)，開發(fā)者可以引入自定義的課程視頻播放組件、在線測(cè)試組件等，為用戶提供更加豐富的學(xué)習(xí)體驗(yàn)。

強(qiáng)大的配置能力

tmagic-editor?具備強(qiáng)大的配置能力，開發(fā)者可以通過配置文件對(duì)編輯器進(jìn)行全方位的定制。從組件的屬性設(shè)置、事件綁定，到頁(yè)面的布局方式、交互效果，都可以通過配置文件進(jìn)行靈活調(diào)整。這種配置化的開發(fā)方式，不僅提高了開發(fā)效率，還使得代碼的可維護(hù)性大大增強(qiáng)。例如，在開發(fā)一個(gè)多語(yǔ)言版本的網(wǎng)站時(shí)，開發(fā)者可以通過配置文件輕松切換不同語(yǔ)言的文本內(nèi)容，而無(wú)需修改大量的代碼。

支持 element-plus、tdesign-vue-next 等 UI 組件庫(kù)并可擴(kuò)展

在 UI 組件庫(kù)方面，tmagic-editor?同樣表現(xiàn)出色。它支持 element-plus、tdesign-vue-next 等流行的 UI 組件庫(kù)，為開發(fā)者提供了豐富的組件選擇。

同時(shí)，tmagic-editor?還具備良好的擴(kuò)展性，開發(fā)者可以根據(jù)項(xiàng)目需求，輕松引入其他 UI 組件庫(kù)。這使得開發(fā)者在構(gòu)建頁(yè)面時(shí)，能夠根據(jù)項(xiàng)目的風(fēng)格和需求，選擇最合適的 UI 組件，打造出美觀、易用的 Web 頁(yè)面。

例如，在開發(fā)一個(gè)簡(jiǎn)約風(fēng)格的管理后臺(tái)時(shí)，開發(fā)者可以選擇 element-plus 的組件，快速搭建出簡(jiǎn)潔明了的頁(yè)面；而在開發(fā)一個(gè)時(shí)尚的電商平臺(tái)時(shí)，tdesign-vue-next 的組件則能為頁(yè)面增添更多時(shí)尚元素。

支持移動(dòng)、PC 布局

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，響應(yīng)式設(shè)計(jì)變得越來(lái)越重要。tmagic-editor?充分考慮到這一點(diǎn)，它支持移動(dòng)、PC 布局，開發(fā)者可以通過簡(jiǎn)單的切換，實(shí)現(xiàn)同一頁(yè)面在不同設(shè)備上的完美展示。無(wú)論是在手機(jī)、平板還是電腦上，用戶都能獲得一致的良好體驗(yàn)。例如，在開發(fā)一個(gè)新聞資訊類應(yīng)用時(shí)，開發(fā)者可以使用?tmagic-editor?輕松創(chuàng)建適應(yīng)不同設(shè)備的頁(yè)面布局，讓用戶在手機(jī)上能夠方便地瀏覽新聞內(nèi)容，在電腦上則能獲得更豐富的信息展示。

如何使用 tmagic-editor？

安裝與初始化

使用 tmagic-editor 非常簡(jiǎn)單，首先需要在項(xiàng)目中安裝相關(guān)依賴。如果你的項(xiàng)目是基于 Vue3 的，可以通過 npm 或 yarn 進(jìn)行安裝：

npm install tmagic-editor

安裝完成后，在項(xiàng)目中引入 tmagic-editor 并進(jìn)行初始化：

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');

基本使用方法

在項(xiàng)目中引入 tmagic-editor 后，就可以在頁(yè)面中使用它了。在 Vue 組件中，可以通過以下方式使用 tmagic-editor：

<template> ?<tmagic-editor :config="editorConfig" @save="handleSave"></tmagic-editor></template>
<script setup>import { ref } from 'vue';
const editorConfig = ref({ ?// 配置項(xiàng)});
const handleSave = (data) => { ?console.log('保存的數(shù)據(jù):', data);};</script>

3.3?插件開發(fā)

tmagic-editor 還支持插件開發(fā)，通過插件可以拓展編輯器的功能。例如，開發(fā)一個(gè)導(dǎo)出 PDF 的插件：

import { definePlugin } from 'tmagic-editor';
export default definePlugin({ ?name: 'export-pdf', ?setup(editor) { ? ?editor.on('save', (data) => { ? ? ?// 導(dǎo)出PDF邏輯 ? ?}); ?}});
//?注冊(cè)插件import ExportPDFPlugin from './ExportPDFPlugin.js';
const editorConfig = ref({ ?plugins: [ExportPDFPlugin]});

當(dāng)然還有更多能力大家可以自行探索挖掘。

github地址：https://github.com/Tencent/tmagic-editor

0XU.CN