開發者工具 · HTML WYSIWYG 編輯器
為編輯者解釋 DOM：為什麼 HTML 是樹，而不是文字檔案
· 背景
html dom 內容可編輯
為非程式設計師介紹了檔案物件模型，涵蓋巢狀規則、父元素和子元素以及瀏覽器如何修復無效巢狀，以解釋看似任意的編輯器行為。
為什麼你的 <p> 會自行關閉 - 打開時標記在貼上後發生了變化
在片段通過編輯器後，段落可能會看起來關閉或移動，因為最終重要的是產生的樹（而不是作者的原始字元序列）。 ToolAcre 增加了另一個轉換：它在自己的白名單下標記並重寫瀏覽器派生的來源。
當來源變更時，詢問哪個階段變更了它。瀏覽器可能已經改變了內容可編輯的 DOM，或者清理程式可能已經映射了別名、解開節點或平衡了接受的標籤。將每個差異稱為「瀏覽器修復了它」隱藏了這個重要的邊界。
盒子裡面的盒子 — 透過一個簡短的例子介紹樹模型
將元素視為透過父子關係連接的盒子。在`<p>Read <strong>carefully</strong>.</p>`中，p是text的parent，strong和more text；堅強是仔細這個字的母體。原始碼縮排可以說明樹，但不能建立關係。
ToolAcre 漂亮的格式化程式將區塊容器放在行上，並將內聯元素與周圍的文字保持在一起。列表接收縮进的 li 行。此格式用于讀取已清理的輸出。無論來源是緊湊的還是跨行分佈的，實際模型仍然保留巢狀元素和文字節點。
允許的巢狀由 ToolAcre 的重寫器平衡；瀏覽器內容模型更廣泛
HTML 定義的內容模型比該編輯器的策略更廣泛、更詳細。 ToolAcre 允許特定的集合，但不驗證每個語意巢狀規則。它的堆疊確保允許的標籤之間形成良好的閉合；這並不能證明每個產生的關係都是目標的理想 HTML。
例如，清單應包含適當的列表項，但通用堆疊可以保留不尋常的允許組合，因為它不是模式驗證器。作者應透過工具列或審查來源建立合理的標題、段落和列表，然後在正確性至關重要時根據目標要求進行驗證。
ToolAcre 用堆疊修復接受的標籤，而不是完整的 HTML 解析演演算法
瀏覽器套用具有錯誤復原功能的完整 HTML 解析演演算法。 ToolAcre 不會重新實現它。它的標記產生器可以識別允許清單所需的結構，並當交叉結束標記出現時，它的編寫器會關閉接受的內部元素。它會丟棄雜散的關閉並在最後關閉剩餘的開啟。
原始碼明確命名解析器差異作為不將該模組視為一般惡意輸入 XSS 過濾器的原因。瀏覽器可以以不同的方式解釋故意格式錯誤的字串。預覽沙箱對 ToolAcre 內部的執行提供了獨立的限制，而伺服器仍然需要適當的 HTML5 感知衛生。
文字節點與空格 — 說明樹中標籤之間存在空格和換行符的原因
元素之間的文字變成文字標記，包括空白字元。漂亮的格式化程式會折疊 pre 以外的普通空白，而 pre 內容則被準確保留。純文字轉換會在區塊結尾和 br 之後插入換行符，然後減少過多空白行的執行。
空白在每個階段的參與程度不同。視覺間距可以來自文字、br、區塊邊界或 CSS。檢查節點和字符，而不是將每個可見間隙視為邊距。清理程序可以標準化格式化空白，而不改變讀者看到的單字。
工作範例：用清單追蹤兩段註解 - 將產生的標記讀取為樹，辨識父母和孩子
建構 `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`。此片段具有三個根級元素子級。段落文字內容豐富有力；此清單包含兩個 li 子項，每個子項都有文字。
在來源和視覺之間切換。允許的樹應該保持平衡，漂亮模式會將標題和段落放在行上，同時縮排清單項目。這個練習是有控制的；它不會示範每個格式錯誤的輸入或瀏覽器修復路徑。
這不包括什麼 - JavaScript DOM 程式設計或 CSS 框模型
本文不教授 JavaScript DOM 程式設計、突變觀察器、選擇 API 或 CSS 框模型。元素樹和佈局盒樹相關但不完全相同。它也沒有聲稱手寫的令牌清單是瀏覽器 DOM。
整潔的樹無法得出通用的安全結論。攻擊者可以針對解析差異和 URL，這就是輸出過濾、沙盒預覽和伺服器衛生仍然不同的原因。使用樹模型來推理結構，而不是放棄接收系統的安全審查。
重點：用樹來思考 — 總結了心智模型以及 ToolAcre 的 HTML WYSIWYG 編輯器的標記輸出如何顯示您正在建立的樹
當視覺行為看起來任意時，在樹上思考。識別您想要的父節點、子節點和文字節點，然後將它們與過濾後的來源進行比較。 ToolAcre 透過將內容可編輯的草稿與可讀的重寫片段配對，使這種檢查變得實用。
強大的心智模型也暴露了局限性：展開的 div 失去了父級，刪除的腳本失去了它的子樹，並 b 變得強大。一旦這些轉換變得明確，修正就變成了結構性決策，而不是標記仍然未知的重複視覺推動。