69 lines
1.5 KiB
Markdown
69 lines
1.5 KiB
Markdown
# Visual Editor Spec
|
||
|
||
## 目標
|
||
|
||
提供行銷可直接操作的同頁編輯體驗，對齊 Google Optimize / Optimize99 的使用感。
|
||
|
||
## 核心互動規則
|
||
|
||
### 1. 選取回饋
|
||
|
||
- hover 顯示藍色虛線框
|
||
- selected 顯示藍色實線框
|
||
- 滑鼠移動時可快速預覽可選區域
|
||
|
||
### 2. 直接編輯
|
||
|
||
- 點選元素後可直接開啟編輯泡泡
|
||
- 支援文字、按鈕文字、按鈕連結、圖片來源、樣式
|
||
- 編輯為即時同步（不用再按套用）
|
||
|
||
### 3. 結構操作
|
||
|
||
- 上移 / 下移 / 拖移
|
||
- 隱藏 / 顯示
|
||
- 複製 / 刪除
|
||
- 前插 / 後插
|
||
|
||
### 4. 歷史機制
|
||
|
||
- 內容編輯與結構操作都必須可 undo/redo
|
||
- restore 後畫布狀態、選取狀態、泡泡狀態要一致
|
||
|
||
## 編輯泡泡規格
|
||
|
||
- 可拖拉、可關閉、固定於視窗可用位置
|
||
- Header 保持簡潔：拖拉點 + 關閉
|
||
- 內容區為可捲動區塊
|
||
- icon hover 要有 tooltip（清楚告知作用）
|
||
|
||
## Bridge Protocol（頁面與 editor）
|
||
|
||
### page -> editor
|
||
|
||
- ready
|
||
- hover/selection 變更
|
||
- structure change 結果
|
||
- history 狀態更新
|
||
|
||
### editor -> page
|
||
|
||
- focus selector
|
||
- start inline edit
|
||
- set text / attr / style
|
||
- structure actions
|
||
- restore state
|
||
|
||
## Selector 與定位策略
|
||
|
||
- 頁面載入時補唯一 `data-mkt-selector`
|
||
- 插入與複製後重建 selector，避免衝突
|
||
- 相似兄弟節點必須可各自選取
|
||
|
||
## 不做事項（此階段）
|
||
|
||
- 不走 Chrome Extension 路線
|
||
- 不增加大型資訊面板干擾畫面
|
||
- 不先做自由版面拖拉排版（以區塊重排為主）
|
||
|