開發者工具 · HTML WYSIWYG 編輯器

所見即所得簡史：從 Xerox PARC 的 Bravo 到瀏覽器編輯器

2026年7月6日 · 背景

html 內容可編輯開發人員工作流程

追蹤所見即所得的編輯過程，從 1970 年代的研究系統到桌面出版和網頁建立器，再到每個瀏覽器中的內容可編輯編輯器。

在 WYSIWYG 之前，您進行了盲目格式化 — 使用標記和列印工作流程打開，以及為什麼視覺化編輯是革命性的

在視覺化編輯之前，作者經常會編寫控制碼或標記，然後查看格式化結果。延遲使得佈局迭代：更改指令、再次渲染、比較和重複。在撰寫過程中顯示格式縮短了該循環並改變了非專家對檔案軟體的期望。

本文故意避免儲存庫未獨立來源的確切第一個和日期。其目的是解釋瀏覽器編輯介面背後的設計血統，而不是證明完整的歷史年表。命名的里程碑在作為實際產品歷史發布之前需要存檔參考。

與 Xerox PARC 相關的研究系統在 WYSIWYG 歷史中被廣泛討論，並該工作簿名為 Bravo。這裡提供的儲存庫來源沒有驗證其日期、功能集或相對於同時代儲存庫的優先級，因此這些細節被省略，而不是解釋為事實。

合理的概念里程碑是點陣圖顯示與格式化檔案的直接操作相結合。螢幕成為輸出的主動近似，而不僅僅是輸入命令的地方。可見格式和底層結構之間的關係仍然定義了現代編輯器的權衡。

該工作簿接下來命名為 Xerox Star、MacWrite 和桌面出版。精確的排序和影響需要超出此程式碼庫的來源。可以說，無需發明的是，圖形個人計算使視覺構圖為更廣泛的受眾所熟悉，並將編輯與字體、間距和頁面佈局聯繫起來。

此桌面模型鼓勵人們對穩定頁面和受控輸出裝置的期望。後來 Web 內容使這項承諾變得複雜，因為一個 HTML 片段可以滿足許多樣式表、寬度和使用者偏好。隨著出版從紙本頁面轉向響應式文件，「所見即所得」一詞變得不再那麼直白。

視覺化網頁建構器將直接組合引入 HTML，並與產生的包裝器和表示標記相關聯。同樣，該工作簿命名了特定產品，但沒有詳細聲譽或時間表的儲存庫證據。本文將重點放在持久的工程權衡上。

視覺工具必須將手勢轉換為樹和字串。如果它針對即時外觀進行最佳化，則可能會發出無法稍後重新設計的本地呈現。如果它限制輸出，來源的視覺保真度就會降低。 ToolAcre 選擇受約束的語意子集並顯示過濾後的來源。

瀏覽器 contenteditable 將編輯主機移至一般頁面元素中。瀏覽器可以管理插入符、選擇、鍵入和刪除，而應用程式程式碼提供控制項並讀取innerHTML。 ToolAcre 遵循該模型，目前透過已棄用的 execCommand 傳送工具列操作。

然後，應用程式會加入本機編輯主機不提供的邊界：貼上攔截、來源清理、刪除報告、字元和字數統計、純文字擷取、複製、下載和惰性預覽。這種分層解釋了為什麼 contenteditable 本身並不是一個完整的產品。

輕量級標記和結構化編輯器以不同的方式回答相同的輸出品質問題。它們限製作者可以表達或儲存的內容，然後呈現受控結果。這份工作簿要求歷史上的反向運動，但這裡沒有任何來源支持日期、收養主張或命名的因果順序。

有用的比較是建築方面的。受約束的來源可以輕鬆區分和轉換，而視覺化表面則降低了格式化的障礙。 ToolAcre 將視覺化繪圖與可見 HTML 相結合，但它不提供協作、檔案模型或確定性跨瀏覽器命令。

本文不提供逐個產品的時間表、發明來源、引用研究人員的話或涵蓋超出廣泛影響力的桌面出版。這些遺漏是故意的，因為沒有提供檔案來源。編輯器實作可以驗證當前行為，而不是歷史優先順序。

它也沒有聲稱視覺化編輯器一定會產生錯誤的標記。輸出品質取決於編輯模型和策略。在這裡，別名和白名單減少了瀏覽器突變後的變化，而來源模式讓作者可以查看剩下的內容。其他編輯可能會選擇不同的結構。

舊的緊張局勢仍然存在：直接的視覺控制有助於作者，而持久的結構化輸出有助於系統和未來的維護人員。可靠的編輯器使翻譯可見，並承認渲染取決於瀏覽器和目標上下文。

ToolAcre 是當代的一個小例子。設定一次性筆記的格式，檢查過濾後的 HTML，並將預覽與來源進行比較。這個練習展示了血統，而沒有將無源歷史大綱變成錯誤的精確性，也沒有聲稱這種實現解決了每一個所見即所得的妥協。