繁體中文

開發者工具 · HTML 所見即所得編輯器

所見即所得編輯器如何將格式轉換為 HTML：contenteditable 解釋

· 工作原理

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

可編輯文件中的粗體短語轉變為 HTML 中的強大元素
原始 ToolAcre 向量圖

解釋了使任何元素可編輯的 contenteditable 屬性、瀏覽器如何在您鍵入和格式化時改變 DOM，以及 DOM 如何變成您複製出來的 HTML。

你按下大膽； <strong> 從哪裡來？ - 開啟點擊按鈕和看到標記之間的間隙

標有粗體的工具列按鈕感覺就像畫筆，但瀏覽器必須在文件樹中表示結果。選定的短語可以成為 <b> 或 <strong> 元素，具體取決於編輯命令和引擎。開發人員的任務是將這些特定於瀏覽器的突變轉換為其他頁面可以讀取的 HTML，而無需接受每個標籤或危險屬性。您在螢幕上看到的是可編輯的 DOM，而不是具有獨立格式化層的文字處理檔案。

contenteditable：使頁面可編輯的屬性 - 解釋編輯主機、插入符號位置以及瀏覽器如何擁有編輯行為

contenteditable="true" 使元素成為編輯宿主。瀏覽器在其內部管理插入符的移動、選擇、插入和刪除，下面有一個 DOM 樹。 ToolAcre 的編輯介面使用此瀏覽器功能並公開視覺模式和來源模式；內容保留在頁面中，而不是提交到富文本伺服器。貼上事件會受到單獨的關注，因為貼上的 HTML 可能包含未經檢查不得進入受信任文件的元素和屬性。

每次擊鍵都是一次 DOM 突變——描述文字節點的成長、元素的包裝和分割，以及為什麼即使文字看起來沒有變化樹也會發生變化

鍵入建立或擴充文字節點；按 Enter 可能會分割一個區塊；將選擇加粗會包圍一個範圍。兩次點擊後的精確 DOM 無法保證與開發人員想像的 <strong> 字串相符：瀏覽器選擇不同的元素和巢狀。 ToolAcre 目前使用 document.execCommand 進行格式化。該 API 已被棄用，但這裡的每個編輯操作都沒有統一實現的直接替換，因此編輯器將其輸出視為要規範化的不受信任的輸入，而不是規範標記。

從即時 DOM 到 HTML 字串 — 解釋將編輯後的樹序列化為可以複製的標記

若要複製 HTML，編輯器會讀取編輯介面的 insideHTML，並將產生的字串通過元素/屬性白名單。 b 等標籤被規範化為語意強；檢查允許的連結是否可接受的 URL 方案，同時刪除事件處理程序和不相關的屬性。來源模式也會將其文字通過相同的濾鏡，然後再將其放回視覺表面。這是特定於編輯器的清理路徑，而不是針對任意使用者的惡意內容的通用伺服器端 HTML 清理程式。

工作範例：帶有粗體短語的兩段註釋 - 透過鍵入、選擇和粗體顯示 DOM，然後顯示生成的標記

輸入兩個段落——“項目更新”和“草稿就緒”——然後在第二個段落中選擇“草稿”並按粗體。瀏覽器可以將 <b>Draft</b> 插入即時 DOM 中。切換到來源模式會將其傳遞給 ToolAcre 的清理程序，該清理程序可以在規範化後在其段落內發出 <strong>Draft</strong> 。嘗試在一次性文件中貼上 <img onerror="..."> 有效負載：輸出允許清單不包含映像或事件處理程序屬性。這個範例說明了為什麼您要檢查產生的標記，而不是假設一次點擊具有一種通用 HTML 表示形式。

為什麼相同的操作在不同的瀏覽器中給出不同的標記 - 涵蓋特定於瀏覽器的編輯行為以及編輯器為何標準化其輸出

不同的瀏覽器以不同的方式實作編輯命令、換行符號和選擇邊界。即使相同的可見段落也可以使用不同的嵌套跨度或區塊元素進行序列化。規範化步驟減少了一些差異，但不會使所見即所得表面成為標準保證的序列化器。 ToolAcre 在視覺結果旁邊顯示原始程式碼，因此您可以修正奇怪的巢狀。它的預覽在具有沙箱屬性的 iframe 中運行，不允許執行任何腳本，從而限制了不安全片段到達該預覽的影響。

這還不包括什麼——協作編輯、撤銷堆疊和完整的編輯器框架不在範圍之內

此頁面不承諾協作編輯、完整的撤銷歷史記錄、精美的電子郵件用戶端或完整的編輯器框架。 Contenteditable 本身無法決定第三方 CMS 接受什麼標記，而基於字串的允許清單不能取代伺服器端 HTML5 解析器清理程序，不受信任的使用者可以在其中提交內容。沙盒預覽是對清理輸出的單獨防禦；兩者都不能使任意 JavaScript 或惡意 URL 在每個目的地都是安全的。

重點：編輯器是一個您可以看到的 DOM — 總結了該機制以及 ToolAcre 的 HTML WYSIWYG 編輯器如何在不離開瀏覽器的情況下公開您的格式生成的標記

編輯器是一個您可以檢視和檢查的 DOM。 ToolAcre 的 HTML WYSIWYG 編輯器為您提供了一種直接方法，可以在瀏覽器本機上將視覺化格式化操作與其產生的過濾後的 HTML 進行比較。輸入並加粗一次性註釋，切換到來源模式並僅保留目標實際支援的元素。