中文 | English

---

簡介

此專案實作一個所見即所得的網頁編輯器。

使用者可以：

• 將左側方塊拖曳至右側，以新增元件到頁面上。
• 點擊任意元件，以顯示該元件的編輯介面。
• 編輯元件的參數值，並即時在畫面上看到改變。

線上展示

https://front-end-practice-ms.vercel.app/

安裝與執行

1. git clone 此 repository 到本地端
2. 於本地端切換到 repository 資料夾下
3. 執行 npm install 指令進行安裝
4. 執行 npm start 指令跑起程式
5. 瀏覽器應會自動開啟程式頁面

關鍵程式碼

• /src/App.js
• /src/App.css
• /src/components/Widget.js
• /src/components/WidgetEditor.js
• /src/components/Draggable.js
• /src/components/Droppable.js

---

Introduction

This is a front-end practice which implements a WYSIWYG web page editor.

You can:

• Drag and drop nodes from left to right to add new widgets to the page.
• Click on a widget to show the widget editor.
• Edit widget attributes and see the changes directly.

Live Demo

https://front-end-practice-ms.vercel.app/

Installation

1. git clone repository to your local environment.
2. npm install to install packages.
3. npm start and this practice should show up.

Key Source Files

• /src/App.js
• /src/App.css
• /src/components/Widget.js
• /src/components/WidgetEditor.js
• /src/components/Draggable.js
• /src/components/Droppable.js