1.5 KiB
1.5 KiB
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 路線
- 不增加大型資訊面板干擾畫面
- 不先做自由版面拖拉排版（以區塊重排為主）