,,

騰訊開源的可視化低開工具

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2023年10月7日 10:12 本文熱度 1047

tmagic-editor

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

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

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

編輯器

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

左面板，包含了組件庫的展示，以及工作區中已添加組件的組件樹展示。
工作區，一個頁面模擬器，用于實時展示用戶添加到當前頁面中的組件在真實頁面中的展示情況。
右面板，展示組件提供出來的表單選項，讓用戶可以通過配置項來改變組件的行為和樣式。
工具欄，放置一些如縮放、撤銷等工具按鍵。

組件

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

組件樣式、邏輯代碼（即開發者寫的 vue, react 等代碼）。
表單配置描述，tmagic-editor的定義是導出一個表單對象，這份配置僅在編輯器中使用。
拓展描述，這部分內容目前還未有嚴格定義，但是我們保留這個擴展能力。
組件 type, 是組件的類型，這是用來告訴編輯器，我們要渲染的是什么組件。每個組件在開發時就應該確定這樣一個唯一、不和其他組件沖突的組件 type。

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

插件

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

插件一般包含如下內容：

插件邏輯代碼。
插件 type，是插件的類型，和組件 type 作用相同。在開發時就應該確定這樣一個唯一、不和其他組件沖突的組件 type。

容器

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

表單配置

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

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

DSL

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