開發者工具 · HTML WYSIWYG 編輯器
為什麼 execCommand 被棄用以及瀏覽器編輯器使用什麼替代
· 工作原理
html 內容可編輯 開發人員工作流程
涵蓋了 document.execCommand 的興衰、其輸出不一致的原因，以及現代編輯器如何基於 Selection、Range 和 beforeinput 進行構建。
不再安全的單行粗體按鈕 - 以 execCommand('bold') 和棄用警告開啟
粗體按鈕可以是一次呼叫：聚焦編輯表面，然後要求 `document.execCommand` 將 `bold` 應用到目前選擇。 ToolAcre 仍然使用該路徑，因為瀏覽器擁有其 contenteditable 元素內的插入符號和選取範圍。緊湊調用很方便，但方便並不意味著其產生的樹是可預測的。
該代碼將拒絕視為一種普通的可能性。它的命令包裝器捕獲異常，宣布瀏覽器拒絕該操作，並將編寫器引導至來源模式。這種後備措施比承諾一次工具列點擊總是產生一個特定元素或在每個引擎中都以相同的方式工作更誠實。
execCommand 做了什麼以及它來自哪裡 - 解釋了它在早期 Internet Explorer 中的起源以及每個瀏覽器的採用
相同的包裝器驅動粗體、斜體、無序和有序列表、格式刪除、撤消、重做、區塊格式、連結和取消連結。這些是工具列中實際存在的命令；本文不會使用對齊、顏色、字體、表格、圖片或實現從未公開的其他熟悉的富文字功能來擴展該列表。
每個指令都針對即時可編輯 DOM 執行。隨後，面板會刷新其原始程式碼、預覽、字數統計以及目前innerHTML 中的刪除報告。因此，保存的結果不是命令日誌。它是瀏覽器在執行或拒絕請求的操作後留下的任何結構的過濾序列化。
為什麼指令 API 被棄用：瀏覽器可以產生不同的 DOM 形狀
棄用很重要，因為 API 沒有為編輯器作者提供每個突變的精確結構契約。 ToolAcre 限制明確警告引擎之間的行為有所不同，特別是在嵌套列表方面。可見清單可能是可接受的，但其嵌套或包裝器選擇與其他瀏覽器產生的標記不同。
沒有儲存庫來源支援每個瀏覽器、版本或指令都有特定相容性結果的宣告。安全宣告的範圍更窄：此實作呼叫已棄用的 API，捕獲拒絕，並提供直接原始碼編輯作為逃生艙。測試您打算使用的瀏覽器和操作，而不是推斷矩陣。
Selection 和 Range 是相關的替代項，但此工具未實作它們
Selection 和 Range 可以描述選定的 DOM 邊界並支援明確樹操作，但 ToolAcre 不使用它們實作取代格式化引擎。將這些 API 命名為目前程式碼路徑會錯誤地描述產品。在這裡，瀏覽器命令仍然是變異器，而消毒劑仍然是輸出邊界。
自訂模型可以擁有標記、區塊、交易和選擇映射，但這是具有不同測試的不同產品架構。這個輕量級編輯器故意避免宣告此類機制。其可審查的契約是，視覺操作可能會建立依賴瀏覽器的 DOM，而來源模式則顯示實際將複製或下載的過濾標記。
beforeinput 不屬於該編輯器的格式化路徑
此實作也不會攔截 `beforeinput` 將編輯意圖轉換為自訂事務。輸入事件僅在瀏覽器更改表面後觸發刷新。貼上和放置是例外：這些事件會被阻止，其剪貼簿或傳輸有效負載會被過濾，並僅插入產生的 HTML 或純文字。
這種區別阻礙了廣泛的架構主張。 ToolAcre 擁有黏貼門，但不是每個擊鍵突變。普通的鍵入、刪除、回車行為和工具列命令仍然是瀏覽器編輯操作。消毒器審查其序列化輸出；它不會將編輯器轉變為 beforeinput 驅動的框架或標準化每個中間 DOM 突變。
工作範例：檢查此編輯器實際產生的遺留指令輸出
若要進行具體檢查，請鍵入兩個短句子，選擇一個短語並按粗體。切換到 HTML 原始碼並檢查該短語周圍的元素。 ToolAcre 在清理期間將舊版 `b` 對應到 `strong`，因此即使即時編輯指令最初選擇舊版標籤，過濾結果也可以是語意的。
重複列表，然後撤銷。工具列發送`insertUnorderedList`和`undo`；它不維護單獨的應用程式歷史記錄。如果瀏覽器拒絕，狀態區域會如此說明。如果嵌套看起來很奇怪，則來源模式是受支援的校正路徑。觀察到的輸出，而不是按鈕標籤，才是證據。
這不包括什麼：這裡沒有實作替換編輯器架構
本文並不聲稱支援現代替換命令系統、協作事務、確定性跨瀏覽器樹或自訂撤銷堆疊。它也不會推斷鍵盤快速鍵的行為，因為來源定義了工具列操作，而不是捷徑註冊表。不支援的功能仍然是遺漏而不是隱含的功能。
安全性與指令選擇是分開的。許可名單過濾發出的標記，並預覽在沒有腳本的情況下進行沙箱處理，但清理程序明確拒絕用作一般惡意輸入 XSS 過濾器。接受不受信任的發佈內容的伺服器仍然需要適當的伺服器端 HTML5 解析器清理程式和特定於目標的策略。
重點：擁有 DOM，而不是命令 — 總結遷移路徑以及產生的標記如何成為您在所見即所得到 HTML 工具中檢查的內容
擁有您可以檢查的結果。在此編輯器中，指令要求瀏覽器改變可內容編輯樹，然後允許清單將該樹的序列化重寫為支援的子集。來源模式公開了切換，並在瀏覽器編輯行為不方便或不一致時提供實用的修復介面。
在與實際工作相同的瀏覽器中使用一次性範例。僅執行附帶的命令，檢查連結和嵌套，在依賴之前測試撤消，並僅在閱讀後複製過濾後的 HTML。這個工作流程尊重棄用，而不假裝 ToolAcre 已經取代了底層編輯 API。