tmagic-editor

騰訊tmagic-editor是一個所見即所得的頁面可視化編輯器，實現(xiàn)零代碼/低代碼生成頁面，可以快速搭建可視化頁面生產(chǎn)平臺，讓非技術(shù)人員可以通過拖拽和配置，自助生成H5頁面、PC頁面、TV頁面，大大降低頁面生產(chǎn)成本。

開源地址：github.com/Tencent/tmagic-editor

在線文檔：tencent.github.io/tmagic-editor/docs/

編輯器

編輯器基礎(chǔ)布局上分為：左面板、工作區(qū)、右面板、工具欄，如下圖。

• 左面板，包含了組件庫的展示，以及工作區(qū)中已添加組件的組件樹展示。

• 工作區(qū)，一個頁面模擬器，用于實時展示用戶添加到當前頁面中的組件在真實頁面中的展示情況。

• 右面板，展示組件提供出來的表單選項，讓用戶可以通過配置項來改變組件的行為和樣式。

• 工具欄，放置一些如縮放、撤銷等工具按鍵。

組件

組件是tmagic-editor可配置頁面元素的最小單位。我們都會從左面板的組件區(qū)中選中組件，加入到工作區(qū)的模擬器中，然后在右面板中對組件進行配置。一個組件的基本內(nèi)容，會包含如下：

• 組件樣式、邏輯代碼（即開發(fā)者寫的 vue, react 等代碼）。

• 表單配置描述，tmagic-editor的定義是導出一個表單對象，這份配置僅在編輯器中使用。

• 拓展描述，這部分內(nèi)容目前還未有嚴格定義，但是我們保留這個擴展能力。

• 組件 type, 是組件的類型，這是用來告訴編輯器，我們要渲染的是什么組件。每個組件在開發(fā)時就應該確定這樣一個唯一、不和其他組件沖突的組件 type。

[  {    text: '文本',    type: 'text', ⬅️  },  {    text: '按鈕',    type: 'button', ⬅️  },  {    text: '測試',    type: 'test', ⬅️  },]

插件

插件和組件類似，但是插件的功能是作為頁面邏輯行為的一種補充方式。一般不顯式的在模擬器中被渲染出具體內(nèi)容（除非插件中會生成組件并插入頁面），通常我們會用插件實現(xiàn)類似登錄，頁面環(huán)境判斷，請求攔截器等等功能。

插件一般包含如下內(nèi)容：

• 插件邏輯代碼。

• 插件 type，是插件的類型，和組件 type 作用相同。在開發(fā)時就應該確定這樣一個唯一、不和其他組件沖突的組件 type。

容器

容器是tmagic-editor編輯器中的一個基礎(chǔ)單位，頁面本身就是一個容器，在基礎(chǔ)組件中稱為組，tmagic-editor通過容器概念，實現(xiàn)了豐富的布局方式，因為我們的布局行為是設置在容器上的，容器內(nèi)的組件是絕對定位、或是順序排布，是根據(jù)容器的配置行為改變的。tmagic-editor的容器理論上可以無限嵌套。

表單配置

表單配置是編輯器右面板展示的內(nèi)容，配置項目都是由組件里的表單描述來決定的，用戶可以在表單配置區(qū)域里通過配置項來改變組件的行為和樣式。

注意，由于每個組件都需要有一些共同的表單配置項目，所以tmagic-editor通過在表單渲染器，統(tǒng)一為所有組件加上了通用的表單配置項目。包括基礎(chǔ)組件樣式配置、鉤子事件配置等。

DSL

DSL 是編輯器搭建頁面的最終產(chǎn)物（描述文件），其中包含了所有組件信息（組件布局，組件配置等）和插件內(nèi)容，以及其他可拓展的信息都存放在 DSL 中。tmagic-editor項目頁的展示即是tmagic-editor頁面在加載 DSL 之后，根據(jù) DSL 的描述進行渲染的。在tmagic-editor中，我們使用 JS schema 來保存這份配置文件。

真實頁面渲染（Page）#

這一部分，對應的是 runtime 中的 page。即把tmagic-editor保存后的配置進行加載、解析、渲染，然后呈現(xiàn)頁面的過程。

頁面渲染

runtime 是魔方提供的頁面渲染環(huán)境。通過加載在編輯器中產(chǎn)出的 DSL，即可得到魔方編輯器希望擁有的最終產(chǎn)物，一個活動頁面。我們提供了 vue2/vue3/react 幾個版本的 runtime。

通過魔方編輯器和 runtime 渲染，以及通過自定義的復雜組件開發(fā)，可以在魔方項目上，搭建出復雜而精美的頁面。

表單渲染

魔方的表單配置項，使用了我們開發(fā)的基于 element-ui 的 @tmagic/form，@tmagic/form 也可以在其他地方單獨使用。支持渲染 JS Schema 提供的表單描述。

混合布局

因為tmagic-editor的布局配置，是指定在容器上的，所以tmagic-editor的設計方式，就可以支持在頁面中實現(xiàn)各種混合布局的嵌套。

能力項

tmagic-editor主要定位是搭建生成移動端H5頁面，如果有搭建PC端低代碼平臺的需求，可以了解一下騰訊出品的另外一個低代碼平臺：無極低代碼平臺。混合布局

toB領(lǐng)域的低代碼平臺，能支撐超大型復雜項目，以更自然、高效的方式實現(xiàn)標準化生產(chǎn)，企業(yè)級應用解決方案！漸進式開發(fā)理念：NoCode、LowCode & ProCode。

可以直接在線體驗，注冊之后進入界面可以看到

創(chuàng)建應用和應用組

然后新建表單

設計完成后可以直接在線測試和訪問。

發(fā)布設置支持向?qū)桨l(fā)布到不同的環(huán)境。

支持組件商店

數(shù)據(jù)集市